小程序
小游戏
企业微信
微信支付
扫描小程序码分享
我使用WeUI组件库中的grid图片怎么设置?还有怎么设置点击事件
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
是小程序不,可以参考下我的。
其中wxml文件中的data-index="{{index}}"表示的是自定义属性,当事件触发时,会把该属性值传递给函数,具体请看官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html#%E5%85%AC%E5%85%B1%E5%B1%9E%E6%80%A7
wxml文件 <view class="weui-grids bg-map" style="border-width: 0px" > <block wx:for="{{grids}}" wx:key="index" wx:for-index="index"> <grid url="" class="weui-grid" hover-class="weui-grid_active" style="" bindtap="gridTap" data-index="{{index}}" > <image class="weui-grid__icon" src="{{item.image}}" style="background-color: darkgrey" /> <view class="weui-grid__label">{{item.text}}</view> </grid> </block> </view> ------------------------------------------------------------------------------------- js文件 data:{ grids:[ {image:"",url:"",text:"企业管理"}, {image:"",url:"",text:"发票审核"}, {image:"",url:"",text:"消息通知"} ] } gridTap:function(e){ console.log(e.detail) console.log(e.currentTarget.dataset.index) wx.showToast({ title: '点击宫格'+e.currentTarget.dataset.index, }) }
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
是小程序不,可以参考下我的。
其中wxml文件中的data-index="{{index}}"表示的是自定义属性,当事件触发时,会把该属性值传递给函数,具体请看官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html#%E5%85%AC%E5%85%B1%E5%B1%9E%E6%80%A7
wxml文件 <view class="weui-grids bg-map" style="border-width: 0px" > <block wx:for="{{grids}}" wx:key="index" wx:for-index="index"> <grid url="" class="weui-grid" hover-class="weui-grid_active" style="" bindtap="gridTap" data-index="{{index}}" > <image class="weui-grid__icon" src="{{item.image}}" style="background-color: darkgrey" /> <view class="weui-grid__label">{{item.text}}</view> </grid> </block> </view> ------------------------------------------------------------------------------------- js文件 data:{ grids:[ {image:"",url:"",text:"企业管理"}, {image:"",url:"",text:"发票审核"}, {image:"",url:"",text:"消息通知"} ] } gridTap:function(e){ console.log(e.detail) console.log(e.currentTarget.dataset.index) wx.showToast({ title: '点击宫格'+e.currentTarget.dataset.index, }) }