首先可以去官方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
<van-cell is-link catchtap='selectTap'>
<view slot="title" class='content'>
<view class="van-cell-text">重复方式</view>
<view class='text_color'>{{selectData[index]}}</view>
</view>
</van-cell>
<van-popup show="{{ show }}" position="bottom" overlay="{{ false }}" >
<text class='select_text'>重复方式</text>
<view class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</view>
</van-popup>
(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布局样式:
<view wx:if="{{selectData[index]=='指定日期'}}">
<!-- <view class="wayDetails">
<text style='margin-bottom:18rpx;margin-left:1rpx;'>提醒日期选择:</text>
</view> -->
<view class='mention'>
<view class="remind">
<text class='advanceTxt' >指定日期</text>
<block wx:for="{{lists}}" wx:key="{{index}}">
<picker mode="date" data-inx="{{index}}" value="{{item.date}}" start="2019-01-01" end="2030-12-30" bindchange="bindDatechange">
<view class="timedata">{{item.date}}</view>
//点击view就弹出日期选择器,然后就把选择的日期填入了view中
</picker>
</block>
<image bindtap='addinput' class="img" src="/imgs/jia.png"></image>
//view后面有一个加号,可以点击不断的加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,
})
},
我遇到了对象的问题,选择日期,结果每个框都是一样的日期,后面请教了大佬,大佬帮我解决了!!!!