微信小程式weui線上入門教程-WeUi基礎元件-grid九宮格
阿新 • • 發佈:2019-01-13
效果圖
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="{{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 class="page__bd"> <view class="weui-grids"> <navigator url="" class="weui-grid" hover-class="weui-grid_active"> <image class="weui-grid__icon" src="/images/menu01.png" /> <view class="weui-grid__label">Grid</view> </navigator> <navigator url="" class="weui-grid" hover-class="weui-grid_active"> <image class="weui-grid__icon" src="/images/menu02.png" /> <view class="weui-grid__label">Grid</view> </navigator> <navigator url="" class="weui-grid" hover-class="weui-grid_active"> <image class="weui-grid__icon" src="/images/menu03.png" /> <view class="weui-grid__label">Grid</view> </navigator> <navigator url="" class="weui-grid" hover-class="weui-grid_active"> <image class="weui-grid__icon" src="/images/menu04.png" /> <view class="weui-grid__label">Grid</view> </navigator> <navigator url="" class="weui-grid" hover-class="weui-grid_active"> <image class="weui-grid__icon" src="/images/menu05.png" /> <view class="weui-grid__label">Grid</view> </navigator> <navigator url="" class="weui-grid" hover-class="weui-grid_active"> <image class="weui-grid__icon" src="/images/menu06.png" /> <view class="weui-grid__label">Grid</view> </navigator> </view> </view> </view>