微信小程序(二十二)action-sheet組件詳細介紹

action-sheet組件是從底部彈出可選菜單項,估計也是借鑒IOS的設計添加的,action-sheet有兩個子組件, action-sheet-item為每個選項,action-sheet-cancel取消選項,與action-sheet-item中間會有間隔,并且點擊會觸發(fā)action-sheet監(jiān)聽事件
主要屬性:

wxml
<!--觸發(fā)action-sheet事件-->
<button type="primary" bindtap="listenerButton">彈出ActionSheet</button>
<!--默認action-sheet為隱藏,由button觸發(fā)-->
<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" >
<block wx:for-items="{{actionSheetItems}}" >
<action-sheet-item >{{item}}</action-sheet-item>
</block>
<!--自動隱藏action-sheet-->
<action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>
js
Page({
data:{
// text:"這是一個頁面"
actionSheetHidden: true,
actionSheetItems: ['item1', 'item2', 'item3']
},
listenerButton: function() {
this.setData({
//取反
actionSheetHidden: !this.data.actionSheetHidden
});
},
listenerActionSheet:function() {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
}
})
相關文章:
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導航 progress組件 action-sheet
應用生命周期 button組件 modal組件
頁面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數(shù)據(jù)綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
相關文章
JavaScript+HTML實現(xiàn)學生信息管理系統(tǒng)
這篇文章主要介紹了JavaScript實現(xiàn)學生信息管理系統(tǒng),文中有非常詳細的代碼示例,對正在學習js的小伙伴們有一定的幫助,需要的朋友可以參考下2021-04-04
微信小程序 轉(zhuǎn)發(fā)功能的實現(xiàn)
這篇文章主要介紹了微信小程序 轉(zhuǎn)發(fā)功能的實現(xiàn)的相關資料,這里提供實現(xiàn)方法及實例幫助大家學習理解,需要的朋友可以參考下2017-08-08

