WeChat小程序交流(QQ群:769977169)
效果图
代码示例
1、xxx.wxml
<form bindsubmit='submitClick' bindreset='resetClick'>
<switch name="status" bindchange='switchClick'>{{switchTitle}}</switch>
<input name="userName" placeholder='请输入帐号' type='text' maxlength="20" confirm-type="next"></input>
<input name="userPassword" placeholder='请输入密码' password='true' maxlength="20" confirm-type="done"></input>
<checkbox-group name="citys" bindchange="checkClick">
<block wx:for="{{checkData}}">
<checkbox value='{{item.name}}' checked="{{item.status}}">{{item.name}}</checkbox>
</block>
</checkbox-group>
<slider name="progress" bindchange='sliderClick'></slider>
<radio-group name="gender" bindchange="radioClick">
<block wx:for="{{radioData}}">
<radio value='{{item.name}}' checked='{{item.status}}'>{{item.name}}</radio>
</block>
</radio-group>
<picker name="protect" bindchange="pickerClick" value='{{pickerIndex}}' range='{{pickerData}}'>{{pickerData[pickerIndex]}}</picker>
<button form-type='submit'>提交</button>
<button form-type='reset'>重置</button>
</form>
2、xxx.wxjs
// pages/modules/Form/form.js
Page({
/**
* 页面的初始数据
*/
data: {
switchTitle:"关",
checkData: [{name: "深圳", status: true},
{name: "广州", status: false},
{name: "东莞", status: false},
{name: "惠州", status: false}],
radioData: [{name:"男", status:true},
{name:"女", status:false}],
pickerData: ["中国人寿", "中国平安", "太平洋人寿", "华夏人寿"],
pickerIndex: 0,
},
switchClick: function (event) {
var status = event.detail.value;
this.setData({
switchTitle: (status ? "开" : "关"),
});
},
checkClick: function (event) {
console.log(event.detail.value);
},
sliderClick: function (event) {
console.log(event.detail.value);
},
radioClick: function (event) {
console.log(event.detail.value);
},
pickerClick: function (event) {
console.log(event.detail.value);
this.setData({
pickerIndex: event.detail.value,
});
},
submitClick: function (event) {
var status = event.detail.value.status;
var userName = event.detail.value.userName;
var userPassword = event.detail.value.userPassword;
var citys = event.detail.value.citys;
var cityText = "";
for (var index in citys) {
var text = citys[index];
cityText += ", " + text;
}
var progress = event.detail.value.progress;
var protect = this.data.pickerData[event.detail.value.protect];
console.log("你的信息已经对外" + (status ? "公开" : "屏蔽") + "\n当前登录帐号:" + userName + ", 密码是:" + userPassword + "\n你所工作过的城市有:" + cityText + "\n你的专业技能评分是:" + progress + "分" + "\n你的保障是:" + protect);
},
resetClick: function (event) {
console.log(event.detail.value);
}
}
注意:form表单里的其他组件,必须设置name属性,否则无法获取对应组件信息。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)