您好,登錄后才能下訂單哦!
本文實例講述了微信小程序實現(xiàn)的點擊按鈕 彈出底部上拉菜單功能。分享給大家供大家參考,具體如下:
index.wxml
<button type="default" bindtap="actionSheetTap">彈出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange"> <block wx:for-items="{{actionSheetItems}}"> <action-sheet-item bindtap="bind{{item.bindtap}}">{{item.txt}}</action-sheet-item> </block> <action-sheet-cancel class="cancel">取消</action-sheet-cancel> </action-sheet> <view> 提示:您選擇了菜單{{menu}} </view>
index.js
Page({ data:{ // text:"這是一個頁面" actionSheetHidden:true, actionSheetItems:[ {bindtap:'Menu1',txt:'菜單1'}, {bindtap:'Menu2',txt:'菜單2'}, {bindtap:'Menu3',txt:'菜單3'} ], menu:'' }, actionSheetTap:function(){ this.setData({ actionSheetHidden:!this.data.actionSheetHidden }) }, actionSheetbindchange:function(){ this.setData({ actionSheetHidden:!this.data.actionSheetHidden }) }, bindMenu1:function(){ this.setData({ menu:1, actionSheetHidden:!this.data.actionSheetHidden }) }, bindMenu2:function(){ this.setData({ menu:2, actionSheetHidden:!this.data.actionSheetHidden }) }, bindMenu3:function(){ this.setData({ menu:3, actionSheetHidden:!this.data.actionSheetHidden }) } })
運行效果(調試環(huán)境問題,顏色出現(xiàn)了偏差,效果湊合看~):
PS:關于微信小程序組件相關說明還可查看微信小程序組件說明表:http://tools.jb51.net/table/wx_component
希望本文所述對大家微信小程序開發(fā)有所幫助。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。