今天给大家带来Grid简单的九宫格图文样式模板制作,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="page">
<view class="page__hd">
<view class="page__title">Grid</view>
<view class="page__desc">九宫格</view>
</view>
<view class="page__bd">
<view class="weui-grids">
<block wx:for-items="{{grids}}" wx:key="{{index}}">
<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>
|
二、js页面代码如下:
Page({
data: {
grids: [0, 1, 2, 3, 4, 5, 6, 7, 8]
}
});
|