微信小程序实用案例代码片段大全《二》

rukezhang

贡献于2017-03-01

字数:10497 关键词:

TITF 出品:微信小程序实用案例代码片段大全《二》 一:使用 checkbox 显示多项选择框 关键代码 index.wxml 1 2 3 4 5 6 checkbox1 checkbox2 checkbox3 提示:{{text}} 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Page({ data:{ // text:"这是一个页面" text:'' }, checkboxgroupBindchange:function(e){ var temp1=e.detail.value var temp2='' console.log(temp1) if(temp1.length!=0){ for(var i=0,len=temp1.length;i radio1 radio2 radio3 5 6 提示:{{text}} 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 6 7 8 9 10 Page({ data:{ // text:"这是一个页面" text:'' }, radiogroupBindchange:function(e){ this.setData({ text:'您选择了'+e.detail.value }) } 11 }) 来自 CODE 的代码片 三:实现 button 点击事件改变数据值 关键代码 index.wxml 1 2 3 4 提示:{{text}} 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 Page({ data:{ 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // text:"这是一个页面" text:'' }, btn_default:function(){ this.setData({ text:'您单击了 default 按钮' }) }, btn_primary:function(){ this.setData({ text:'您单击了 primary 按钮' }) }, btn_warn:function(){ this.setData({ text:'您单击了 warn 按钮' 19 20 21 }) } }) 来自 CODE 的代码片 四:使用 modal 组件弹出对话框 关键代码 1、index.wxml 1 2 3 4 5 6 提示:{{tip}} 来自 CODE 的代码片 snippet_file_0.txt 2、index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Page({ data:{ // text:"这是一个页面" tip:'', buttonDisabled:false, modalHidden:true, show:false }, showModal:function(){ this.setData({ modalHidden:!this.data.modalHidden }) }, modalBindaconfirm:function(){ 15 16 17 18 19 20 21 22 23 24 25 26 27 28 this.setData({ modalHidden:!this.data.modalHidden, show:!this.data.show, tip:'您点击了【确认】按钮!', buttonDisabled:!this.data.buttonDisabled }) }, modalBindcancel:function(){ this.setData({ modalHidden:!this.data.modalHidden, tip:'您点击了【取消】按钮!' }) } }) 来自 CODE 的代码片 五:使用 action-sheet 弹出小程序底部菜单 关键代码 1、index.wxml 1 2 3 4 5 6 7 8 9 10 提示:您选择了菜单{{menu}} 来自 CODE 的代码片 snippet_file_0.txt 2、index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Page({ data:{ // text:"这是一个页面" actionSheetHidden:true, actionSheetItems:[ {bindtap:'Menu1',txt:'菜单 1'}, {bindtap:'Menu2',txt:'菜单 2'}, {bindtap:'Menu3',txt:'菜单 3'} ], menu:'' }, actionSheetTap:function(){ this.setData({ actionSheetHidden:!this.data.actionSheetHidden }) }, 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 actionSheetbindchange:function(){ this.setData({ actionSheetHidden:!this.data.actionSheetHidden }) }, bindMenu1:function(){ this.setData({ menu:1, actionSheetHidden:!this.data.actionSheetHidden }) }, bindMenu2:function(){ this.setData({ menu:2, actionSheetHidden:!this.data.actionSheetHidden }) 33 34 35 36 37 38 39 40 }, bindMenu3:function(){ this.setData({ menu:3, actionSheetHidden:!this.data.actionSheetHidden }) } }) 来自 CODE 的代码片 六:使用 form 表单获取输入框数据 关键代码 index.wxml 1 2 3 4
5 6 7 8 9 10 11 12 13 14 15 16 17
{{tip}} {{userName}} {{psw}} 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.length==0||e.detail.value.psw.length==0){ this.setData({ tip:'提示:用户名和密码不能为空!', userName:'', psw:'' }) }else{ 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 this.setData({ tip:'', userName:'用户名:'+e.detail.value.userName, psw:'密码:'+e.detail.value.psw }) } }, formReset:function(){ this.setData({ tip:'', userName:'', psw:'' }) } }) 来自 CODE 的代码片 七:使用 slider 设置数据值和 switch 开关组件 关键代码 index.wxml 1 2 3 4 5 6 7 8 9 10 微信小程序组件:滑动选择器 slider 最小值:{{min}} 最大值:{{max}} 当前值:{{text}} --------------------------------- 微信小程序组件:开关组件 switch 开关组件当前状态:{{switchState}} 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Page({ data:{ // text:"这是一个页面" min:'20', max:'150', text:'', switchState:'开' }, sliderBindchange:function(e){ this.setData({ text:e.detail.value }) }, switchBindchange:function(e){ if(e.detail.value){ 16 17 18 19 20 21 22 23 24 25 this.setData({ switchState:'开' }) }else{ this.setData({ switchState:'关' }) } } }) 来自 CODE 的代码片 八:使用 picker 实现时间和日期选择框 关键代码 index.wxml 1 2 3 4 5 6 7 8 9 当前城市选择:{{picker1Range[picker1Value]}} 当前时间选择: {{timeValue}} 当前日期选择: {{dateValue}} 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 Page({ data:{ 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // text:"这是一个页面" picker1Value:0, picker1Range:['北京','上海','广州','深圳'], timeValue:'08:08', dateValue:'2016-10-13' }, normalPickerBindchange:function(e){ this.setData({ picker1Value:e.detail.value }) }, timePickerBindchange:function(e){ this.setData({ timeValue:e.detail.value }) }, 19 20 21 22 23 24 datePickerBindchange:function(e){ this.setData({ dateValue:e.detail.value }) } }) 来自 CODE 的代码片 九:使用 checkbox 显示多项选择框 关键代码 index.wxml 1 2 3 4 5 6 checkbox1 checkbox2 checkbox3 提示:{{text}} 来自 CODE 的代码片 snippet_file_0.txt index.js 1 2 3 4 5 6 7 8 9 10 11 12 Page({ data:{ // text:"这是一个页面" text:'' }, checkboxgroupBindchange:function(e){ var temp1=e.detail.value var temp2='' console.log(temp1) if(temp1.length!=0){ for(var i=0,len=temp1.length;i

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档

相关文档