-
13739719116
-
-
微信小程序把玩《七》：switch组件，action-sheet组件，modal组件
小程序资讯
一：switch组件
switch控制器组件采用主要属性：
wxml
js
Page({
data:{
// text:"这就是一个页面"
},
/**
* switch控制器监听
*/
listenerSwitch: function(e) {
console.log('switch类型控制器当前状态-----', e.detail.value);
},
/**
* checkbox类型控制器监听
*/
listenerCheckboxSwitch: function(e) {
console.log('checkbox类型控制器当前状态-----', e.detail.value)
},
onLoad:function(options){
// 页面初始化 options为页面重定向所增添的参数
},
onReady:function(){
// 页面图形顺利完成
},
onShow:function(){
// 页面表明
},
onHide:function(){
// 页面暗藏
},
onUnload:function(){
// 页面停用
}
})
二：action-sheet组件
action-sheet组件从底部插入附加菜单项，估算也就是先进经验iOS的设计嵌入的，action-sheet存有两个子组件， action-sheet-item为每个选项，action-sheet-cancel中止选项，与action-sheet-item中间可以存有间隔，并且页面可以引爆action-sheet监听事件
主要属性：
wxml
js
Page({
data:{
// text:"这就是一个页面"
actionSheetHidden: true,
actionSheetItems: ['item1', 'item2', 'item3']
},
listenerButton: function() {
this.setData({
//row
actionSheetHidden: !this.data.actionSheetHidden
});
},
listenerActionSheet:function() {
this.setData({
actionSheetHidden: !this.data.actionSheetHidden
})
},
onLoad:function(options){
// 页面初始化 options为页面重定向所增添的参数
},
onReady:function(){
// 页面图形顺利完成
},
onShow:function(){
// 页面表明
},
onHide:function(){
// 页面暗藏
},
onUnload:function(){
// 页面停用
}
})
三：modal组件
modal插入框常用在提示信息一些信息比如说：选择退出应用领域，确切内存，修正资料递交时一些提示信息等等。
常用属性：
wxml
title="选择退出应用领域" hidden="{{hiddenModal}}" confirm-text="再看一看" cancel-text="选择退出" bindconfirm="listenerConfirm" bindcancel="listenerCancel" > 您与否真的必须选择退出应用领域 js Page({ data:{ // text:"这就是一个页面" 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为页面重定向所增添的参数 }, onReady:function(){ // 页面图形顺利完成 }, onShow:function(){ // 页面表明 }, onHide:function(){ // 页面暗藏 }, onUnload:function(){ // 页面停用 } })
数据IDC、软件开发、网站建设开发、系统开发、微信小程序开发、APP移动开发、SAAS定制开发、系统二开等。全行业互联网软件开发解决方案，产品经理一对一沟通需求。