微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能【附源碼下載】
更新時(shí)間：2017年12月09日 10:56:31 作者：FutrueJet
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)action-sheet彈出底部菜單功能,結(jié)合實(shí)例形式分析了action-sheet組件彈出菜單的使用技巧,包括元素遍歷、事件響應(yīng)及屬性設(shè)置等操作方法,并附帶源碼供讀者下載參考,需要的朋友可以參考下
本文實(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:"這是一個(gè)頁(yè)面"
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、源代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
JavaScript隨機(jī)打亂數(shù)組順序之隨機(jī)洗牌算法
這篇文章主要介紹了JavaScript隨機(jī)打亂數(shù)組順序之隨機(jī)洗牌算法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
雖然小程序在剛推出時(shí)是不支持組件化的,但如今小程序開(kāi)始支持自定義組件開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于微信小程序組件化開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下2023-03-03
javascript 上下banner替換具體實(shí)現(xiàn)
這篇文章介紹了javascript 上下banner替換具體實(shí)現(xiàn)，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了淺析Bootstrap組件之面板組件 的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了用JS制作可交互的視頻進(jìn)度條的案例,在開(kāi)始制作視頻進(jìn)度條之前,想先給大家補(bǔ)充一些關(guān)于元素的一些特點(diǎn)和用法,為大家更好地理解接下來(lái)的分享,感興趣的朋友可以參考下2024-04-04
JavaScript中split與join函數(shù)的進(jìn)階使用技巧
這篇文章主要介紹了JavaScript中split與join函數(shù)的進(jìn)階使用技巧,split和join通常被用來(lái)操作數(shù)組和字符串之間的轉(zhuǎn)換,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了rewrap-ajax.js插件,需要的朋友可以參考下2017-10-10
javascript AOP 實(shí)現(xiàn)ajax回調(diào)函數(shù)使用比較方便
javascript AOP 實(shí)現(xiàn)ajax回調(diào)函數(shù)使用比較方便，需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter Pattern，是作為兩個(gè)不兼容的接口之間的橋梁。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-08-08
JavaScript設(shè)計(jì)模式之責(zé)任鏈模式實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之責(zé)任鏈模式,結(jié)合實(shí)例形式分析了責(zé)任鏈模式的概念、原理及具體定義與使用技巧,需要的朋友可以參考下2019-01-01