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

最新推荐文章于 2024-06-02 22:06:28 发布

离奇6厘米

最新推荐文章于 2024-06-02 22:06:28 发布

阅读量428

点赞数

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

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

版权

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

11 篇文章 2 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

一、实现效果

在这里插入图片描述

二、数据几口

【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
       })
     }
   })
 },
})