微信小程序学习第4天：实现9宫格内容水平垂直居中

最新推荐文章于 2023-12-06 10:32:57 发布

离奇6厘米

最新推荐文章于 2023-12-06 10:32:57 发布

阅读量554

点赞数

分类专栏： css 小程序文章标签：微信小程序学习小程序

本文链接：https://blog.csdn.net/vest_er/article/details/128874845

版权

小程序同时被 2 个专栏收录

11 篇文章 2 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

该文章展示了如何使用微信小程序（WXML和WXSS）的语法来创建一个图标列表，通过GET请求从https://www.escook.cn/categories获取数据，并在页面上渲染。CSS样式定义了灵活的网格布局，使图标和文字居中对齐，同时设置边框。JS代码处理了网络请求并更新了数据。

摘要由CSDN通过智能技术生成

一、实现效果

在这里插入图片描述

二、数据几口

【GET】https://www.escook.cn/categories

三、代码

1、WXML

<view class="container">
  <view wx:for="{{itemIcon}}" class="item">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

2、WXSS

.container {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  text-align: center;
}
.item{
  width: 33.33%;
  height: 250rpx;
  display: flex;
  flex-direction: column;  
  align-items: center;
  justify-content: center;
  border-right: 2rpx solid #ccc;
  border-bottom:  2rpx solid #ccc;
  font-size: 24rpx;
  box-sizing: border-box;
}
.container .item:nth-child(3n) {
  border-right: none;
}
.container image {
  width: 40rpx;
  height: 40rpx;
}

3、js代码

Page({
  data: {
    itemIcon:[],
  },
  onLoad(options) {
   wx.request({
     url: 'https://www.escook.cn/categories',
     method:'GET',
     success:(res)=>{
       this.setData({
         itemIcon:res.data
       })
     }
   })
 },
})