描述:在开发小程序过程中,发现一些不错的案例,平时使用也比较多,稍微总结了下经验,以下内容可以直接复制使用,希望对大家有所帮助,废话不多说直接上干货!
一:表单的2种提交方式
截图展示部分(效果图)
(二)form 表单:获取组件的值
优点: 传统的表单提交方式,通过在表单控件内设置name的值,在表单统一提交时,就可以通过event.detail.value拿到表单中各个表单组件的值,代码量少,简单
缺点: 处于form表单之外的其他表单控件值是无法拿到的,button按钮页必须要在form内,并且写法固定
1、这是最普遍通用的一种方法,所有用户输入的组件放置在form内,当点击form表单中form-type为submit的button组件时,它会将表单组件中的value值进行提交,但此时需要在表单组件中加上name来作为key
wxml代码
<view class="container">
<form bindsubmit="formSubmit">
<view>
<view class="title">switch</view>
<switch checked name="switchChecked" />
</view>
<view>
<view class="title">radio</view>
<radio-group name="radio">
<label><radio checked value="boy" />男</label>
<label><radio value="girl" />女</label>
</radio-group>
</view>
<view>
<view class="title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox checked value="itclanCoder" />itclanCoder</label>
<label><checkbox value="itclan" />itclan</label>
</checkbox-group>
</view>
<view>
<view class="title">slider</view>
<slider value="50" name="slider" show-value></slider>
</view>
<view>
<input
class="input"
value="{{inputVal}}"
name="input"
placeholder="这是一个输入框"
/>
</view>
<view>
<button class="submitBtn" size="default" type="primary" formType="submit">
提交
</button>
</view>
</form>
</view>
wxss代码
/* pages/getformdata/getformdata.wxss */
.container {
padding: 15rpx 40rpx;
}
.title {
margin: 20rpx 0;
}
label {
margin-right: 50rpx;
}
.input {
border-bottom: 1px solid #abcdef;
}
.submitBtn {
margin-top: 40rpx;
}
button:not([size='mini']) {
width: 100% !important;
}
2、在上面的示例代码中,你会发现当有多个radio,多个checkbox时,它会被包裹在radio-group,checkbox-group中,不然是无法获取到控件中的具体数值的,当然也不是说非得包裹,那只能使用第二种方法获取控件中的值
3、其中表单中的switch,radio,checkbox中的checked并不是必须的,可以填写一个默认初始值,进行控制,在本文示例中,我是给了一个初始值在form表单中绑定了bindsubmit事件方法,它会携带form中的数据触发submit事件,同时form表单内的button按钮中的formType绑定了submit事件,它是用于form表单组件提交的,会触发form组件的submit(提交表单)/reset(重置表单)事件
wsjs代码
// pages/getformdata/getformdata.js
Page({
/**
* 页面的初始数据
*/
data: {
inputVal: '123',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},
// 表单提交
formSubmit(event) {
console.log(event); // event.detail.value就可以拿到具体表单中的值
const {
switchChecked,
radio,
checkbox,
slider,
input,
} = event.detail.value; // 解构
console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123"
},
});
(二)非from表单:获取组件的值
优点:非表单form,button组合方式方式提交数据,比较灵活(在表单form之外也能提交数据)
缺点: 需要添加绑定bindchange事件,需要触发setData,但频繁的触发setData是比较消耗性能,在表单组件不是很多的情况下,可以选用此方式
去除了表单form,name属性,在表单组件中新增了bindchange方法
wxml代码
<view class="container">
<view>
<view>
<view class="title">switch</view>
<switch checked bindchange="handleSwitch" />
</view>
<view>
<view class="title">radio</view>
<!-- radio-group是不能少的,否则就会出问题的,下面的checkbox-group也是 -->
<radio-group bindchange="handleRadio">
<label><radio checked value="boy" />男</label>
<label><radio value="girl" />女</label>
</radio-group>
</view>
<view>
<view class="title">checkbox</view>
<checkbox-group bindchange="handleCheckBox">
<label><checkbox checked value="itclanCoder" />itclanCoder</label>
<label><checkbox value="itclan" />itclan</label>
</checkbox-group>
</view>
<view>
<view class="title">slider</view>
<slider
bindchange="handleSlideChange"
value="{{sliderVal}}"
show-value
></slider>
</view>
<view>
<input
bindinput="handleInputChange"
class="input"
value="{{inputVal}}"
placeholder="这是一个输入框"
/>
</view>
<!-- 此处并非用的button按钮,照样可以提交表单数据 -->
<view>
<view class="submitBtn" bindtap="handleSubmit">提交</view>
</view>
</view>
</view>
wxss代码
/* pages/getformdata/getformdata.wxss */
.container {
padding: 15rpx 40rpx;
}
.title {
margin: 20rpx 0;
}
label {
margin-right: 50rpx;
}
.input {
border-bottom: 1px solid #abcdef;
}
.submitBtn {
margin-top: 40rpx;
}
button:not([size='mini']) {
width: 100% !important;
}
当在switch,radio-group,checkbox-group,slider,input中添加了bindchange方法,checked,input发生改变时就会触发 change 事件,然后通过携带事件对象,拿到表单组件对应的具体数值
wsjs代码
// pages/getformdata/getformdata.js
Page({
/**
* 页面的初始数据
*/
data: {
switchVal: true, // switch默认初始化值
radioVal: 'boy', // radio初始化值,有时候男女,也可以用1,0等表示男,女的
checkboxVal: 'itclanCoder', // checkbox初始化值
sliderVal: 30,
inputVal: '123', // 输入框初始化值
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},
// switch中的值
handleSwitch(event) {
console.log(event);
const switchVal = event.detail.value;
this.setData({
// 通过setData更改数据
switchVal,
});
},
// 触发readio
handleRadio(event) {
console.log(event);
const radio = event.detail.value;
this.setData({
radioVal: radio,
});
},
// 触发checkbox
handleCheckBox(event) {
console.log(event);
const checkbox = event.detail.value;
this.setData({
checkboxVal: checkbox,
});
},
// 触发slideChange
handleSlideChange(event) {
console.log(event);
const sliderVal = event.detail.value;
this.setData({
sliderVal: sliderVal,
});
},
// input输入框的值
handleInputChange(event) {
console.log(event);
const inputVal = event.detail.value;
this.setData({
inputVal: inputVal,
});
},
// 表单提交
handleSubmit() {
console.log(
this.data.switchVal,
this.data.radioVal,
this.data.checkboxVal,
this.data.sliderVal,
this.data.inputVal
); // true "boy" "itclanCoder" 30 "123"
},
});
(三)总结
全文总结两段话就是:
1、小程序中获取表单组件的值有两种方式,一种是通过传统的form结合button组合的方式,这种方式有局限性,所有的表单组件都需要在form内,通过在表单组件内设置name值的方式获取表单组件中的值(必须要设置,否则拿到表单组件的值就是`undefined`)
2、另一种是非表单form提交数据的方式是通过在表单组件上绑定bindchange事件,通过事件对象的方式,获取event.detail.value的方式即可拿到,但同时牺牲性能为代价,需要触发setData,从而在最终提交表单时,拿到具体的表单数值