微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能【附源碼下載】
更新時間:2017年12月09日 10:56:31 作者:FutrueJet
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能,結(jié)合實例形式分析了action-sheet組件彈出菜單的使用技巧,包括元素遍歷、事件響應(yīng)及屬性設(shè)置等操作方法,并附帶源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能。分享給大家供大家參考,具體如下:
1、效果展示

2、關(guān)鍵代碼
① index.wxml
<button type="default" bindtap="actionSheetTap">彈出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
<block wx:for-items="{{actionSheetItems}}" wx:key="{{txt}}">
<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
})
}
})
3、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
JavaScript隨機打亂數(shù)組順序之隨機洗牌算法
這篇文章主要介紹了JavaScript隨機打亂數(shù)組順序之隨機洗牌算法的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08
javascript 上下banner替換具體實現(xiàn)
這篇文章介紹了javascript 上下banner替換具體實現(xiàn),有需要的朋友可以參考一下2013-11-11
JavaScript中split與join函數(shù)的進階使用技巧
這篇文章主要介紹了JavaScript中split與join函數(shù)的進階使用技巧,split和join通常被用來操作數(shù)組和字符串之間的轉(zhuǎn)換,需要的朋友可以參考下2016-05-05
javascript AOP 實現(xiàn)ajax回調(diào)函數(shù)使用比較方便
javascript AOP 實現(xiàn)ajax回調(diào)函數(shù)使用比較方便,需要的朋友可以參考下。2010-11-11

