微信小程序weui的grid九宫格组件在我们开发页面的时候会时常用到，其实微信公众号weui 也有一个九宫格的组件，感兴趣的同学可点击链接阅读学习，这里只介绍小程序weui九宫格的实现。
一、引入小程序weui css样式库，请参考第一章
二、在pages目录中新建目录grid以及文件grid.wxml，并添加如下代码
<view class="page">
<view class="page__hd">
<view class="page__title">Grid</view>
<view class="page__desc">九宫格(wwww.vxzsk.com V型知识库原创)</view>
</view>
<view class="page__bd">
<view class="weui-grids">
<block wx:for="{{grids}}" wx:key="*this">
<navigator url="" class="weui-grid" hover-class="weui-grid_active">
<image class="weui-grid__icon" src="../images/icon_tabbar.png" />
<view class="weui-grid__label">Grid</view>
</navigator>
</block>
</view>
</view>
</view>三、在根目录app.json配置文件中配置grid文件路径，保存后会自动生成对应的js、css等文件
"pages/grid/grid",
四、在pages/grid/grid.js文件中添加代码
Page({
data: {
grids: [0, 1, 2, 3, 4, 5, 6, 7, 8]
}
});此代码是初始化九宫格的格子数目，如上述代码，数目为9个格子。
五、给九宫格格子添加背景图片
在pages/images目录下添加一张图片，图片名称为icon_tabbar.png，如果没有images目录可新建
六、预览效果
此文章本站原创，地址 https://www.vxzsk.com/1902.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程