用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

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

天下雪 2016-10-27 15:41

一:使用checkbox显示多项选择框关键代码index.wxml 1 2 3 4 5 6checkbox-group bindchange="checkboxgroupBindchange" checkbox value="checkbox1"checkbox1/checkbox checkbox value="checkbox2"checkbox2/ch ...

一:使用checkbox显示多项选择框

关键代码

index.wxml

 1
 2
 3
 4
 5
 6
<checkbox-group bindchange="checkboxgroupBindchange">
<checkbox value="checkbox1">checkbox1</checkbox>
<checkbox value="checkbox2">checkbox2</checkbox>
<checkbox value="checkbox3">checkbox3</checkbox>
</checkbox-group>
<view>提示:{{text}}</view>
 来自CODE的代码片
snippet_file_0.txt

index.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
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<len;i++){
temp2=temp2+temp1[i]+','
}
this.setData({
text:'您选择了:'+temp2
})
}else{
this.setData({
text:''
})
}
}
})
 来自CODE的代码片

二:使用radio显示单选项

关键代码

index.wxml

 1
 2
 3
 4
 5
 6
<radio-group bindchange="radiogroupBindchange">
<radio value="radio1">radio1</radio>
<radio value="radio2">radio2</radio>
<radio value="radio3">radio3</radio>
</radio-group>
<view>提示:{{text}}</view>
 来自CODE的代码片
snippet_file_0.txt

index.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
Page({
data:{
// text:"这是一个页面"
text:''
},
radiogroupBindchange:function(e){
this.setData({
text:'您选择了'+e.detail.value
})
}
})
 来自CODE的代码片

三:实现button点击事件改变数据值

关键代码

index.wxml

 1
 2
 3
 4
<button type="default" bindtap="btn_default">default类型按钮</button>
<button type="primary" bindtap="btn_primary">primary类型按钮</button>
<button type="warn" bindtap="btn_warn">warn类型按钮</button>
<view>提示:{{text}}</view>
 来自CODE的代码片
snippet_file_0.txt

index.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
Page({
data:{
// text:"这是一个页面"
text:''
},
btn_default:function(){
this.setData({
text:'您单击了default按钮'
})
},
btn_primary:function(){
this.setData({
text:'您单击了primary按钮'
})
},
btn_warn:function(){
this.setData({
text:'您单击了warn按钮'
})
}
})
 来自CODE的代码片

四:使用modal组件弹出对话框

关键代码

1、index.wxml

 1
 2
 3
 4
 5
 6
<view>提示:{{tip}}</view>
<button type="default" bindtap="showModal">点击我弹出modal对话框</button>
<view>
<modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消"
bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好,我是modal对话框</modal>
</view>
 来自CODE的代码片
snippet_file_0.txt

2、index.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
Page({
data:{
// text:"这是一个页面"
tip:'',
buttonDisabled:false,
modalHidden:true,
show:false
},
showModal:function(){
this.setData({
modalHidden:!this.data.modalHidden
})
},
modalBindaconfirm:function(){
this.setData({
modalHidden:!this.data.modalHidden,
show:!this.data.show,
tip:'您点击了【确认】按钮!',
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: TITF 来自: 授权地址

相关阅读