微信小程序中一个表单多个picker选择器
一、微信小程序的MVVM思想
MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！
微信小程序的前端架构设计，以及开发模式，充分参考了Vue、React这一类MVVM的前端开发框架，我们简单举几个例子：
比如通过data-bind进行数据双像绑定，就像极了Vue的设计风格；
再比如一些标签语法糖，列表循环：
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
相信写过AngularJS 和 Vue的同学都不会陌生；
再比如，事件绑定：
<view bindtap="add"> {{count}} </view>
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
data: this.data.count + 1
})
}
})
这和之前写js、html时代的操作DOM来实现页面效果，最大的不同就是所有的操作都是取操作数据、操作data通过data的改变来实现页面效果。
二、需求分析
点击增加出差详情，增加一个子项，这里需要注意的是在一个表单里面会有多个选择框。
当我们分析如何实现这个功能的时候，其实就是分析使用怎样的data数据结构来存储这个表单，通过对data数据的增加删除来实现动态功能。
如下所示：
[
//第一个出差详情
{
time1:'出发时间',
time2:'到达时间',
addres1:'出发地',
addres2:'到达地'
},
//第二个出差详情
{
time1:'出发时间',
time2:'到达时间',
addres1:'出发地',
addres2:'到达地'
},
//第三个出差详情
{
time1:'出发时间',
time2:'到达时间',
addres1:'出发地',
addres2:'到达地'
}
//以此类推。。。
]
三、功能实现
- index.wxml
<view>
<view bindtap='add'>新增</view>
<view wx:for="{{array}}" wx:key wx:for-item="itm" wx:for-index="idx">
<view class="li">
<picker bindchange="changeRegin1" mode = "region" value="{{array[idx]}}" data-current="{{idx}}">
<view class="tui-picker-detail">{{array[idx].address1}}</view>
</picker>
</view>
<view class="li">
<picker bindchange="changeRegin2" mode = "region" value="{{array[idx]}}" data-current="{{idx}}">
<view class="tui-picker-detail">{{array[idx].address2}}</view>
</picker>
</view>
<view class="li">
<picker bindchange="beginDateChange1" mode = "date" value="{{array[idx].time1}}" data-current="{{idx}}">
<view class="tui-picker-detail">{{array[idx].time1}}</view>
</picker>
</view>
<view class="li">
<picker bindchange="beginDateChange2" mode = "date" value="{{array[idx].time1}}" data-current="{{idx}}">
<view class="tui-picker-detail">{{array[idx].time2}}</view>
</picker>
</view>
<view class="li">
</view>
</view>
</view>
- index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
array: [
{
time1:'2019-09-01',
time2:'2019-09-01',
address1: ["北京市", "北京市", "西城区"],
address2: ["北京市", "北京市", "西城区"]
}
]
},
//事件处理函数
changeRegin1: function (ev) {
const curindex = ev.target.dataset.current
var arr = this.data.array
arr[curindex].address1 = ev.detail.value
this.setData({
array: arr
})
console.log(this.data.array)
},
changeRegin2: function (ev) {
const curindex = ev.target.dataset.current
var arr = this.data.array
arr[curindex].address2 = ev.detail.value
this.setData({
array: arr
})
console.log(this.data.array)
},
beginDateChange1:function(ev){
const curindex = ev.target.dataset.current
var arr = this.data.array
arr[curindex].time1 = ev.detail.value
this.setData({
array: arr
})
console.log(this.data.array)
},
beginDateChange2: function (ev) {
const curindex = ev.target.dataset.current
var arr = this.data.array
arr[curindex].time2 = ev.detail.value
this.setData({
array: arr
})
console.log(this.data.array)
},
add:function(){
var arr = this.data.array;
arr.push({
time1: '2019-09-01',
time2: '2019-09-01',
address1: ["北京市", "北京市", "西城区"],
address2: ["北京市", "北京市", "西城区"]
});
this.setData({
array: arr
})
console.log(this.data.array)
}
})