微信小程序的日期选择器的使用（picker）

首先可以去官方API看看组件：

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

需求：主要页面，点击重复方式，弹出js里面的数据，选择指定日期时，显示第三张图片：

     

点击加号可以加view框，点击view框就弹出日期选择器：（记得每个框的日期是不一样的哦！）

            

（1）先在js里面定义数据：（在data里面写）

  data: {
    lists: [{inx:0,date:''}],
    selectData: ['每天', '每周', '每年', '指定日期', '自定义(每隔N天)'],//下拉列表的数据
}

（2）我的弹出选择器：wxml

   
    
      重复方式
      {{selectData[index]}}
    
  

    重复方式
    {{item}}
  

（3）上面代码里面的catchtap='optionTap'以及catchtap='selectTap'的js代码：

 // 点击下拉显示框
  selectTap() {
    this.setData({
      show: !this.data.show
    });
  },

// 点击下拉列表
  optionTap(e) {
    let Index = e.currentTarget.dataset.index;//获取点击的下拉列表的下标
    this.setData({
      index: Index,
      show: !this.data.show
    });
  },

（4）当选中指定日期的选项的wxml布局样式:

    
    
        
          指定日期
            
                
                {{item.date}}  
//点击view就弹出日期选择器，然后就把选择的日期填入了view中
               
            
            
//view后面有一个加号，可以点击不断的加view
        
    

（5）上面的bindchange="bindDatechange"以及bindtap='addinput'的js的代码：

 //  点击日期组件确定事件
  bindDatechange:function(e) {
    let inx = e.currentTarget.dataset.inx;
    let obj =this.data.lists[inx];
    obj.date = e.detail.value;  
    console.log(e.detail.value)
    this.setData({
      lists:this.data.lists,
    })   
  },


 addinput: function () {
    var lists = this.data.lists;
    var newData = {inx:lists.length,date:''};
    lists.push(newData);//实质是添加lists数组内容，使for循环多一次
    this.setData({
      lists: lists,
    })
  },
  

 

我遇到了对象的问题，选择日期，结果每个框都是一样的日期，后面请教了大佬，大佬帮我解决了！！！！