微信小程序?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)文章
這篇文章主要介紹了JS截取字符串的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript截取字符串的常用函數(shù)與具體使用技巧,并附帶說(shuō)明了JS截取字符串substr和substring方法的區(qū)別,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了js 去掉字符串前后空格實(shí)現(xiàn)代碼集合,需要的朋友可以參考下2017-03-03
JavaScript懶加載與預(yù)加載原理與實(shí)現(xiàn)詳解
這篇文章主要介紹了JavaScript懶加載與預(yù)加載，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章給大家介紹了在echarts中如何在柱狀圖上方顯示文字,文中給出了完整的示例代碼,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
JS實(shí)現(xiàn)骰子3D旋轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)骰子3D旋轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Javascript函數(shù)緩存的實(shí)現(xiàn)及應(yīng)用場(chǎng)景
Javascript函數(shù)緩存是一種提高網(wǎng)頁(yè)性能的重要技術(shù),通過(guò)將函數(shù)結(jié)果存儲(chǔ)在緩存中,避免重復(fù)計(jì)算,從而提高頁(yè)面加載速度和響應(yīng)速度,本文主要介紹了Javascript函數(shù)緩存的實(shí)現(xiàn)及應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
JS文本框追加多個(gè)下拉框的值的簡(jiǎn)單實(shí)例
這篇文章介紹了JS文本框追加多個(gè)下拉框的值的例子，有需要的朋友可以參考一下2013-07-07
Bootstrap導(dǎo)航條學(xué)習(xí)使用(一)
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了JS工廠模式開(kāi)發(fā),結(jié)合具體實(shí)踐案例形式分析了基于javascript工廠模式實(shí)現(xiàn)的輪播功能相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
25個(gè)讓你眼前一亮的JavaScript代碼技巧分享
學(xué)習(xí)強(qiáng)大的JavaScript一行代碼，能夠節(jié)省你的時(shí)間和代碼量，所以本文為大家整理了25個(gè)JavaScript實(shí)用代碼技巧，感興趣的小伙伴可以了解一下2023-07-07