WeUI for 小程序Grid九宫格

2018年10月04日 11:28 | 45次浏览 作者原创 版权保护

微信小程序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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程