问题：在循环picker选择器时，该改变一个选项，导致全部的选项都被改变，如何操作才能实现只改变当前的操作项呢？？？
在js中设置一个数组变量，存储每个picker选择器默认的值；然后根据bingchange获取相应的索引、e.detail.value,根据这些更新数组，重新赋值，然后根据数组的索引、值更新相应的picker索引以及值。
代码如下：
<view class="complex-mark">
<view class="table-head tr">
<view class="td">A</view>
<view class="td">B</view>
<view class="td">C</view>
<view class="td">D</view>
<view class="td">E</view>
</view>
<block wx:for="{{selectTeeth}}" wx:key="{{index}}" wx:for-item="itm" wx:for-index="idx">
<view class="tr tcon">
<view class="td">{{itm.area}}</view>
<view class="td">{{itm.num}}</view>
<view class="td">
<picker bindchange="bindPickerChangek" data-current="{{idx}}" value="{{itm.indexk}}" range="{{koutong}}">
<view class="picker">
{{koutong[itm.indexk]}}
</view>
</picker>
</view>
<view class="td">
<picker bindchange="bindPickerChanges" data-current="{{idx}}" value="{{itm.indexs}}" range="{{songdong}}">
<view class="picker">{{songdong[itm.indexs]}}
</view>
</picker>
</view>
<view class="td">
<picker bindchange="bindPickerChangem" data-current="{{idx}}" value="{{itm.indexm}}" range="{{mentong}}">
<view class="picker"> {{mentong[itm.indexm]}}
</view>
</picker>
</view>
</view>
</block>
</view>
js部分:
// pages/teeth/teeth.js
Page({
/**
* 页面的初始数据
*/
data: {
tjType: "",
creatTime: "",
koutong: ["点击选择", "±", "+", "++", "+++"],
songdong: ["点击选择", "0°", "Ⅰ°", "Ⅱ°", "Ⅲ°"],
mentong: ["点击选择", "有", "无"],
selectTeeth: [{
area: "右上方",
num: 2,
indexk: 0,
indexs: 0,
indexm: 0,
}, {
area: "右上方",
num: 2,
indexk: 0,
indexs: 0,
indexm: 0,
}, {
area: "右上方",
num: 2,
indexk: 0,
indexs: 0,
indexm: 0,
}, {
area: "右上方",
num: 2,
indexk: 0,
indexs: 0,
indexm: 0,
}, {
area: "右上方",
num: 2,
indexk: 0,
indexs: 0,
indexm: 0,
}, {
area: "右上方",
num: 2,
indexk: 0,
indexs: 0,
indexm: 0,
}, {
area: "右上方",
num: 2,
indexk: 0,
indexs: 0,
indexm: 0,
}, {
area: "右上方",
num: 2,
indexk: 0,
indexs: 0,
indexm: 0,
}],
},
bindPickerChangek(e) {
const curindex = e.target.dataset.current;
this.data.selectTeeth[curindex].indexk = e.detail.value;
this.data.selectTeeth[curindex].selectkoutong = this.data.koutong[e.detail.value]
this.setData({
selectTeeth: this.data.selectTeeth
})
console.log(this.data.selectTeeth)
},
bindPickerChanges(e) {
const curindex = e.target.dataset.current;
this.data.selectTeeth[curindex].indexs = e.detail.value;
this.data.selectTeeth[curindex].selectsongdong = this.data.songdong[e.detail.value]
this.setData({
selectTeeth: this.data.selectTeeth
})
console.log(this.data.selectTeeth)
},
bindPickerChangem(e) {
const curindex = e.target.dataset.current;
this.data.selectTeeth[curindex].indexm = e.detail.value;
this.data.selectTeeth[curindex].selectmentong = this.data.mentong[e.detail.value]
this.setData({
selectTeeth: this.data.selectTeeth
})
console.log(this.data.selectTeeth)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(e) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
index.wxss
page {
background: #f2f2f2;
}
.teethNum {
background: #fff;
width: 100%;
}
.title {
display: flex;
justify-content: space-between;
margin: 0 auto;
line-height: 140rpx;
}
.teeth {
display: flex;
flex-wrap: wrap;
margin-top: 100rpx;
}
.teeth .title {
text-align: center;
font-size: 16px;
}
.teeth-box {
width: 49%;
}
.teeth-box:nth-child(1) {
border-bottom: 1px solid #000;
}
.teeth-box:nth-child(2) {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
.teeth-box:nth-child(3) {
border-right: 1px solid #000;
}
.number {
display: flex;
flex-wrap: wrap;
width: 76%;
justify-content: space-around;
margin: 0 auto;
/* margin-top: 30rpx; */
}
.number view {
width: 50rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
color: #666;
border-radius: 50%;
border: 2px solid #666;
margin-top: 10rpx;
}
.string {
display: flex;
justify-content: space-around;
margin: 24rpx auto 50rpx auto;
}
.string view {
width: 50rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
border: 2px solid #666;
font-size: 14px;
border-radius: 50%;
}
.complex-btn {
color: #20a1c4;
text-decoration: underline;
margin-top: 40rpx;
padding-bottom: 30rpx;
text-align: center;
}
.complex {
width: 750rpx;
background: #fff;
padding: 20rpx 0;
margin-top: 50rpx;
}
.complex .title .right {
color: #58b6bf;
}
.btn {
width: 630rpx;
height: 100rpx;
background: #58b6bf;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 100rpx;
margin-top: 60rpx;
border-radius: 5px;
}
.teethCon {
margin: 0 auto;
}
.tr {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #f2f2f2;
padding-top: 15rpx;
padding-bottom: 15rpx;
}
.number .selected {
border: 2px solid #58b6bf;
color: #58b6bf;
}
.tr .left {
line-height: 75rpx;
}
.td {
width: 20%;
text-align: center;
}
.table-head {
background: #A2ECF3;
color: #fff;
padding: 10rpx 0;
}
.table-head td {
color: #fff;
}
.td:nth-child(2) {
width: 8%;
}
.td:nth-child(5) {
width: 32%;
}
.complex-mark {
margin-top: 20rpx;
}
.tcon {
color: #000;
}
.title {
padding-left: 15rpx;
}
文章评论