亚洲一区二区三区网站 ,国产一级欧美黑人一级,国产熟睡乱子伦午夜视频网

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

時(shí)間：2016-10-21 15:11:00

一：switch組件

switch開關(guān)組件使用主要屬性：

wxml

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


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

Page({
data:{
// text:"這是一個(gè)頁面"
},

/**
* switch開關(guān)監(jiān)聽
*/
listenerSwitch: function(e) {
console.log('switch類型開關(guān)當(dāng)前狀態(tài)-----', e.detail.value);

},
/**
* checkbox類型開關(guān)監(jiān)聽
*/
listenerCheckboxSwitch: function(e) {
console.log('checkbox類型開關(guān)當(dāng)前狀態(tài)-----', e.detail.value)
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})

二：action-sheet組件

action-sheet組件是從底部彈出可選菜單項(xiàng)，估計(jì)也是借鑒iOS的設(shè)計(jì)添加的，action-sheet有兩個(gè)子組件， action-sheet-item為每個(gè)選項(xiàng)，action-sheet-cancel取消選項(xiàng)，與action-sheet-item中間會(huì)有間隔，并且點(diǎn)擊會(huì)觸發(fā)action-sheet監(jiān)聽事件

主要屬性：

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:"這是一個(gè)頁面"
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(){
// 頁面關(guān)閉
}
})

三：modal組件

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

常用屬性：

wxml

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


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

Page({
data:{
// text:"這是一個(gè)頁面"
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為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})