Bootstrap

小程序跳转页面保存radio或checkbox的选择状态

(如果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:

 

;