(如果radio或者checkbox在当前页面操作的话就不会存在状态不一致的问题,但是放在同一个页面就会导致想关闭弹框的时候不能用navigateBack()的效果来关------表达有点乱,看不懂就算了,总之现在变成了A、B两个页面)
先说radio的:主要是利用页面跳转传值 和 修改页面栈来实现的(应该也是可以和checkbox用本地缓存来实现的,但是我已开始就这个了,所以没有改)
效果图:从A去B,选择想要的radio,返回A,又想再进去B,radio还是保持你刚刚选中的状态
A页面的js代码:
tapIntentionProject: function () {//点击页面 前往意向楼盘弹框
var intentionProject = this.data.intentionProject
wx.navigateTo({
url: '../component/recproject/recproject?intentionProject=' + intentionProject,
})
},
B页面的JS代码:
onLoad: function (options) {//获取从A页面传来的值
//如果有意向楼盘则修改渲染数据,让已选中的意向楼盘选中
var intentionProject = options.intentionProject;
// console.log(intentionProject)
if (intentionProject != undefined) {
var intProjectList = this.data.intProjectList;
for (let i = 0; i < intProjectList.length; ++i) {
var cityList = intProjectList[i].listitem;
for (let j = 0; j < cityList.length; ++j) {
var items = cityList[j].pages;
for (let t = 0; t < items.length; t++) {
// console.log(items[t].value)
if (items[t].value == intentionProject){
items[t].checked = true
}
}
}
}
this.setData({
intProjectList: intProjectList
})
}
},
intentionProjectChange: function (e) {//获取意向楼盘值
// console.log(e.detail.value);
var intentionProject = e.detail.value;
this.setData({
intentionProject: intentionProject,
})
},
chooseIntentionProject: function () {//选择意向楼盘并关闭弹框
var intentionProject = this.data.intentionProject;
var pages = getCurrentPages();//获取页面栈
var prevPage = pages[pages.length - 2];//获取上一个页面
//直接修改上个页面的数据
prevPage.setData({
intentionProject: intentionProject,
flag: true
});
wx.navigateBack();
},
B页面的wxml:
到checkbox的了:主要是利用了setStorage设置本地缓存的相关方法实现的(设置缓存、读取缓存、清除缓存)
效果图:
A页面JS:
tapAlternativeProject: function () {//点击页面 前往备选楼盘弹框
wx.navigateTo({
url: '../component/recproject/recproject',
});
},
//监听页面卸载(清除本地缓存)
onUnload:function(){
wx.removeStorage({
key: 'stProjectList',
success: function (res) { },
})
wx.removeStorage({
key: 'stChkNum',
success: function (res) { },
})
},
B页面JS:
onLoad: function (options) {
//(读取缓存)如果有备选楼盘则修改渲染数据,让已选中的备选楼盘选中
wx.getStorage({
key: 'stProjectList',
success: function(res) {
// console.log(res.data)
that.setData({
altProjectList: res.data,
})
},
})
wx.getStorage({
key: 'stChkNum',
success: function (res) {
// console.log(res.data)
that.setData({
chkNum: res.data
})
},
})
},
alternativeProjectChange: function (e) {//获取备选楼盘值,限制选择个数
var checkValue = e.detail.value;console.log(checkValue)
var altProjectList = this.data.altProjectList;
for (let y = 0; y < altProjectList.length; ++y) {
var cityList = altProjectList[y].listitem;
for (let i = 0; i < cityList.length; ++i) {
var items = cityList[i].pages;
// console.log(items);
for (let t = 0; t < items.length; ++t) {
items[t].checked = false;
for (var j = 0; j < checkValue.length; j++) {
if (checkValue.length > 4) {
checkValue.shift(checkValue[0]);
} else {
if (items[t].value == checkValue[j]) {
items[t].checked = true;
}
}
}
}
}
}
this.setData({
altProjectList: altProjectList,
chkNum: checkValue.length,
alternativeProject: checkValue
})
},
chooseAlternativeProject: function () {//点击按钮关闭弹框备选楼盘
var chkNum = this.data.chkNum;
var altProjectList = this.data.altProjectList;
var pages = getCurrentPages();//获取页面栈
var prevPage = pages[pages.length - 2];//获取上一个页面
//直接修改上个页面的数据
prevPage.setData({
chkNum: chkNum,
});
wx.navigateBack();
//设置缓存
wx.setStorage({
key: 'stProjectList',
data: altProjectList,
})
wx.setStorage({
key: 'stChkNum',
data: chkNum,
})
},
B页面的wxml: