微信小程序用 flex 实现九宫格
目标：把屏幕按九宫格的方式均分切块，为了方便扩展，增加了 scroll-view
九宫格效果如下：
超出九宫格的效果如下：
http://mpvideo.qpic.cn/0bc3yyac4aaatqafgxfxpjqvbrwdf3daalqa.f10004.mp4?
一. 在 js 文件的 data 中，增加 items
data: {
items: ['BLE', 'WIFI', 'NFC',
'BLE', 'WIFI', 'NFC',
'BLE', 'WIFI', 'NFC'
]
},二. 在 wxml 文件中，增加如下代码
<!-- 页面根 -->
<view class="pageRoot">
<!-- 页面内容超出屏幕时可滑动 -->
<scroll-view scroll-y="true">
<view class="scrollView">
<view class="content" wx:for="{{items}}" wx:key="index">
<text>{{items[index]}}</text>
</view>
</view>
</scroll-view>
</view>•用 wx:for 遍历 data（js文件）中的 items，去生成 页面中的每一个方格
三. 在 wxss 文件中做两个步骤
1.定义 scrollView
.scrollView {
display: flex; # 页面显示使用 flex
flex-direction: row; # flex 方向为 行
flex-wrap: wrap;
justify-content: space-between; # 两端对齐，方格之间等间隔
}- wrap：这里为：如果多个方格按一行放置，如果总长度没有超过行，就放置下一个方格，否则就换行放置，如下所示：
2. 定义每一个方格
.content {
width: 33vw; # 定义方格的宽度 为 屏幕宽度的 33 等分， 总共 100 份
height: 33vw;
box-sizing: border-box;
background-color: lightblue;
color: whitesmoke;
display: flex; # 定义 方格中的内容
flex-direction: row;
align-items: center; /* 子 view 垂直居中 */
justify-content: center;
margin-top: 1px;
}四. 测试
测试效果如开头所示
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-12-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读