這篇文章主要介紹了微信小程式action-sheet元件詳細介紹的相關資料,需要的朋友可以參考下
action-sheet元件是從底部彈出可選選單項，估計也是藉用IOS的設計添加的，action-sheet有兩個子組件，action-sheet-item為每個選項，action-sheet-cancel取消選項，與action-sheet-item中間會有間隔，並且點擊會觸發action-sheet監聽事件
主要屬性：
wxml
<!--触发action-sheet事件-->
<button type="primary" bindtap="listenerButton">弹出ActionSheet</button>
<!--默认action-sheet为隐藏，由button触发-->
<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为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})更多微信小程式action- sheet組件詳細介紹相關文章請關注PHP中文網！
