手机扫码查看
微信小程序之九宫格布局
页面：
<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;
}
- 本页地址 http://www.evshou.com/?p=3269
- 上一篇 <<微信小程序之网络数据请求
- 下一篇 >>微信小程序之页面导航
发表评论