在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
准备 ①:打开组件开关(app.json中写入) "useExtendedLib": { "weui": true } ①:引入组件(在使用的页面.json中写入) { "usingComponents": { "mp-actionSheet": "weui-miniprogram/actionsheet/actionsheet" } }
使用 wxml 1 <view class="box"> 2 <view wx:for="{{test}}"> 3 4 <view class="item_name" data-value="{{item.dbname}}" bindtap="onclick">{{item.name}}</view> 5 </view> 6 7 </view> 8 9 <mp-actionSheet bindactiontap="btnClick" show="{{showActionsheet}}" actions="{{groups}}" title="- 请选择操作 -"> 10 </mp-actionSheet> js 1 Page({ 2 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 test: { 8 item1: { 9 'name': '海绵宝宝', 10 'dbname': 'db1', 11 }, 12 item2: { 13 'name': '派大星', 14 'dbname': 'db2', 15 } 16 }, 17 showActionsheet: false,//弹窗状态值 18 groups: [//弹窗信息 19 { text: '操作1', value: 1 }, 20 { text: '操作2', value: 2 }, 21 { text: '操作3', value: 3 }, 22 ], 23 nowClickValue: ''//存储当前按下按钮的值 24 }, 25 26 //组件绑定的事件 27 btnClick(e) { 28 let { value } = e.detail 29 console.log("点击了:", value) 30 31 //判断值,执行相关操作 32 switch (value) { 33 case 1: 34 console.log("点击了1,执行相关操作") 35 break 36 case 2: 37 console.log("点击了2,执行相关操作") 38 break 39 case 3: 40 console.log("点击了3,执行相关操作") 41 break 42 } 43 }, 44 45 //按钮绑定的事件 46 onclick(e) { 47 //取值 48 this.data.nowClickValue = e.currentTarget.dataset.value 49 console.log("当前点击的按钮数据库名称:", this.data.nowClickValue) 50 51 this.setData({ 52 showActionsheet: true//显示弹窗 53 }) 54 55 }, 56 }) 效果图
|
请发表评论