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

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

官方文档--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)
  }
})