微信小程序一个表单多个picker选择器

微信小程序一个表单多个picker选择器

在某商的时候,我参与开发了至少有五个小程序。那个时候人少活多,而且头一次接触小程序,在临近上线时刻至少有三次通宵写代码。至今还记忆犹新,也非常感谢斌哥当时的帮助。/辛苦了

虽然我已经很久没接触微信小程序,但是小程序MVVM思想已经深入人心,也对我以后接触vue提供了理论基础。

官方文档–picker组件

一、微信小程序的MVVM思想

MVVM的设计思想:关注Model的变化,让MVVM框架去自动更新DOM的状态,从而把开发者从操作DOM的繁琐步骤中解脱出来!

微信小程序的前端架构设计,以及开发模式,充分参考了Vue、React这一类MVVM的前端开发框架,我们简单举几个例子:

比如通过data-bind进行数据双像绑定,就像极了Vue的设计风格;
再比如一些标签语法糖,列表循环:

1
2
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

相信写过AngularJS 和 Vue的同学都不会陌生;
再比如,事件绑定:

1
2
3
4
5
6
7
8
9
10
11
12
<view bindtap="add"> {{count}} </view>

Page({
data: {
count: 1
},
add: function(e) {
this.setData({
data: this.data.count + 1
})
}
})

这和之前写js、html时代的操作DOM来实现页面效果,最大的不同就是所有的操作都是取操作数据、操作data通过data的改变来实现页面效果。

二、需求分析

点击增加出差详情,增加一个子项,这里需要注意的是在一个表单里面会有多个选择框。

image

当我们分析如何实现这个功能的时候,其实就是分析使用怎样的data数据结构来存储这个表单,通过对data数据的增加删除来实现动态功能。

如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
[
//第一个出差详情
{
time1:'出发时间',
time2:'到达时间',
addres1:'出发地',
addres2:'到达地'
},
//第二个出差详情
{
time1:'出发时间',
time2:'到达时间',
addres1:'出发地',
addres2:'到达地'
},
//第三个出差详情
{
time1:'出发时间',
time2:'到达时间',
addres1:'出发地',
addres2:'到达地'
}
//以此类推。。。
]

三、功能实现

  • index.wxml
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
<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
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
//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)
}
})
-------------已经触及底线 感谢您的阅读-------------

本文标题:微信小程序一个表单多个picker选择器

文章作者:趙小傑~~

发布时间:2019年08月23日 - 17:10:40

最后更新:2019年08月24日 - 11:09:27

原始链接:https://cnsyear.com/posts/8630a911.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%