<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:item="*this"> <navigator url="../{{item.path}}/{{item.path}}" class="weui-grid" hover-class="weui-grid_active"> <image class="weui-grid__icon" src="../../../image/info/{{item.icon}}" /> <view class="weui-grid__label">{{item.name}}</view> </navigator> </block> </view> </view> </view> |
/* pages/info/payment/payment.wxss */ @import "../../common/lib/weui.wxss"; .weui-form-preview{ margin-bottom: 25px; } page{ background-color: #F8F8F8; font-size: 16px; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; } .page__hd { padding: 40px; } .page__bd { padding-bottom: 40px; } .page__bd_spacing { padding-left: 15px; padding-right: 15px; } .page__ft{ padding-bottom: 10px; text-align: center; } .page__title { text-align: left; font-size: 20px; font-weight: 400; } .page__desc { margin-top: 5px; color: #888888; text-align: left; font-size: 14px; } .weui-grid__icon { display: block; width: 42px !important; height: 42px !important; margin: 0 auto; } |
// pages/sample/index/index.js Page({ data:{ grids: [ {name:'薪水', path: "salary", icon: "salary.png"}, {name:'组织', path: "salary", icon: "diagram.png"}, {name:'公告', path: "salary", icon: "megaphone.png"}, {name:'分析', path: "salary", icon: "presentation.png"}, {name:'KPI', path: "salary", icon: "graph.png"}, {name:'门禁', path: "salary", icon: "credit-card.png"}, {name:'密码', path: "salary", icon: "check.png"}] }, onLoad:function(options){ }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) |
模板简介:该模板名称为【微信小程序打卡信息九宫格导航页面设计教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。