最近在学习小程序，正好发现一个问题，微信小程序多列表渲染数据开关怎么互不影响，记录一下，分享给大家




{{filter.replaceStar(index)}}






{{item.ymname}}

{{item.ymms}}







已记录



记录



{{item.time}}






查看待\n打疫苗





{{filter.replaceStar(index)}}






{{item.ymname}}

{{item.ymms}}







已记录



记录



{{item.time}}






查看待\n打疫苗

// pages/list/list.js
const app = getApp()
var time =''
Page({
data: {
id:0,
list: [],
date:'',
tr:'',
s:''
},
//事件处理函数
// bindcancel:function (e) {
// var that = this
// console.log(e.target.dataset.id)
// that.setData({
// tr: 1,
// })
// },
bindDateChange:function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
time = e.detail.value
var that = this
var arr = that.data.list
var index = e.target.dataset.index
var index1 = e.target.dataset.fid
arr[index1][index].seleced = 1
arr[index1][index].time = e.detail.value
that.setData({
id: e.target.dataset.id,
date: time,
list: arr
})
},
cancle:function (e) {
var that = this
var arr = that.data.list
var index = e.target.dataset.index
var index1 = e.target.dataset.fid
arr[index1][index].seleced = ''
that.setData({
id: e.target.dataset.id,
list: arr
})
},
wait:function () {
wx.navigateTo({
url: '../wait/wait'
})
},
lis: function () {
wx.navigateTo({
url: '../archives/archives'
})
},
onLoad: function () {
var that = this
wx.request({
url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=yimiaolist', //仅为示例，并非真实的接口地址
method: 'post',
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
that.setData({

list: res.data
})
}
})
}
})
// pages/list/list.js
const app = getApp()
var time =''
Page({
data: {
id:0,
list: [],
date:'',
tr:'',
s:''
},
//事件处理函数
// bindcancel:function (e) {
// var that = this
// console.log(e.target.dataset.id)
// that.setData({
// tr: 1,
// })
// },
bindDateChange:function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
time = e.detail.value
var that = this
var arr = that.data.list
var index = e.target.dataset.index
var index1 = e.target.dataset.fid
arr[index1][index].seleced = 1
arr[index1][index].time = e.detail.value
that.setData({
id: e.target.dataset.id,
date: time,
list: arr
})
},
cancle:function (e) {
var that = this
var arr = that.data.list
var index = e.target.dataset.index
var index1 = e.target.dataset.fid
arr[index1][index].seleced = ''
that.setData({
id: e.target.dataset.id,
list: arr
})
},
wait:function () {
wx.navigateTo({
url: '../wait/wait'
})
},
lis: function () {
wx.navigateTo({
url: '../archives/archives'
})
},
onLoad: function () {
var that = this
wx.request({
url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=yimiaolist', //仅为示例，并非真实的接口地址
method: 'post',
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
that.setData({

list: res.data
})
}
})
}
})总结：
这里使用了双层循环，需要注意的是使用wx:key='*this'循环本身
使用wx:if="{{item.seleced==1}}"标记点击效果，给数据自定义属性wx:key='*this'wx:if="{{item.seleced==1}}"
arr[index1][index].seleced = 1
arr[index1][index].seleced = 1