舒大少博客

一个95后少年的个人博客

当前时间为:
欢迎大家来到舒大少博客http://www.evshou.com,广告合作以及淘宝商家推广请微信联系15357240395

微信小程序之九宫格布局

2022-04-21 18:52:28
swq1822677238

手机扫码查看

微信小程序之九宫格布局

微信小程序之九宫格布局

页面:

<view class=”nav9″>
  <view wx:for=”{{nine}}” wx:key=”id”>
   <image src=”{{item.icon}}” style=”width: 50px;height:50px”></image>
   <text>{{item.name}}</text>
  </view>
 </view>
样式:
.nav9{
  display: flex;
  flex-wrap: wrap;
  border-top: 1rpx solid #eee;
  border-left: 1rpx solid #eee;
}
.nav9 view{
  box-sizing: border-box;
  width:33.33%;
  height:200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
}
.nav9 text{
  font-size: 24rpx;
  margin-top: 10px;
}

发表评论

邮箱地址不会被公开。 必填项已用*标注