微信小程序把玩《七》：switch組件，action-sheet組件，modal組件

時間：2016-10-21 15:11:00

一：switch組件

switch開關(guan) 組件使用主要屬性：

wxml

<view>switch類型開關(guan) </view>
<switch type="switch" checked="true" bindchange="listenerSwitch"/>


<view>checkbox類型開關(guan) </view>
<switch type="checkbox" bindchange="listenerCheckboxSwitch" />

Page({
data:{
// text:"這是一個(ge) 頁麵"
},

/**
* switch開關(guan) 監聽
*/
listenerSwitch: function(e) {
console.log('switch類型開關(guan) 當前狀態-----', e.detail.value);

},
/**
* checkbox類型開關(guan) 監聽
*/
listenerCheckboxSwitch: function(e) {
console.log('checkbox類型開關(guan) 當前狀態-----', e.detail.value)
},
onLoad:function(options){
// 頁麵初始化 options為(wei) 頁麵跳轉所帶來的參數
},
onReady:function(){
// 頁麵渲染完成
},
onShow:function(){
// 頁麵顯示
},
onHide:function(){
// 頁麵隱藏
},
onUnload:function(){
// 頁麵關(guan) 閉
}
})

二：action-sheet組件

action-sheet組件是從(cong) 底部彈出可選菜單項，估計也是借鑒ioses的設計添加的，action-sheet有兩(liang) 個(ge) 子組件， action-sheet-item為(wei) 每個(ge) 選項，action-sheet-cancel取消選項，與(yu) action-sheet-item中間會(hui) 有間隔，並且點擊會(hui) 觸發action-sheet監聽事件

主要屬性：

wxml

<button type="primary" bindtap="listenerButton">彈出ActionSheet</button>

<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" >

<block wx:for-items="{{actionSheetItems}}" >
<action-sheet-item >{{item}}</action-sheet-item>
</block>

<action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

Page({
data:{
// text:"這是一個(ge) 頁麵"
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為(wei) 頁麵跳轉所帶來的參數
},
onReady:function(){
// 頁麵渲染完成
},
onShow:function(){
// 頁麵顯示
},
onHide:function(){
// 頁麵隱藏
},
onUnload:function(){
// 頁麵關(guan) 閉
}
})

三：modal組件

modal彈出框常用在提示一些信息比如：退出應用，清楚緩存，修改資料提交時一些提示等等。

常用屬性：

wxml

<button bindtap="listenerButton" type="primary">彈出modal</button>


<modal
title="退出應用"
hidden="{{hiddenModal}}"
confirm-text="再看看"
cancel-text="退出"
bindconfirm="listenerConfirm"
bindcancel="listenerCancel" >
您是否真的要退出應用
</modal>

Page({
data:{
// text:"這是一個(ge) 頁麵"
hiddenModal: true
},

listenerButton:function() {
this.setData({
hiddenModal: !this.data.hiddenModal
})
},

listenerConfirm:function() {
this.setData({
hiddenModal: true
})
},

listenerCancel:function() {
this.setData({
hiddenModal: true
})
},

onLoad:function(options){
// 頁麵初始化 options為(wei) 頁麵跳轉所帶來的參數
},
onReady:function(){
// 頁麵渲染完成
},
onShow:function(){
// 頁麵顯示
},
onHide:function(){
// 頁麵隱藏
},
onUnload:function(){
// 頁麵關(guan) 閉
}
})