微信小程序 ActionSheet底部彈窗組件使用方法

本文轉載自查看原文 2021-04-15 14:10 510 微信小程序/ actionSheet

准備

①:打開組件開關(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>

 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 })

效果圖

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序自定義組件——底部菜單欄 ActionSheet 微信小程序底部彈窗動畫微信小程序底部菜單欄的使用方法微信小程序-modal彈窗組件微信小程序彈窗組件微信小程序彈窗組件微信小程序中使用Vant Weapp的ActionSheet上拉菜單出現的樣式問題微信小程序——wxParse使用方法微信小程序騰訊地圖SDK使用方法微信小程序——極點日歷使用方法