小程序 tab标签切换时出现数据状态保留的问题

出现的问题就是例如在女装时点击了销量最多,然后点击男装,发现男装的小编推荐既然对应的是销量最多的界面,当时就懵逼了。

后来检测才发现,我的代码在点击销量最多和价格最优的时候对设置的初始模拟数据进行了直接操作,导致其数据本身发生变化。导致切换女装/男装时初始界面(数据)不对。

主要场景是:点击女装,再点击男装,再点击女装。

后面我在onload里存储了女装和男装的初始数据,并且后面的操作数据都是用的基于存储的初始数据副本。切换女装/男装时,我对副本进行重新获取即可。

var nz_data=require("../../data/nz.js");
var man_data = require("../../data/man.js");
// pages/reduce/reduce.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentTab:1,
    currentTab1:1,
    nz_datas:[],
    class:1,
    init_datas:[],
    init_datas1:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(nz_data);
    this.setData({
      nz_datas: nz_data,
      init_datas: nz_data
    })

    console.log(this.data.nz_datas);
  },

  toDetail: function (e) {
    var pid=e.currentTarget.dataset.pid;
    console.log("pid="+pid);
    wx.navigateTo({
      url: './detail/detail?pid='+pid
    })
  },

  switchNav: function(event) {
    var cur = event.currentTarget.dataset.current;
    if (this.data.currentTab == cur) { return false; }
    else {
      this.setData({
        currentTab: cur
      })
    }

    if(cur==1){
      this.setData({
        init_datas: nz_data,
        currentTab1: 1
      })
      var tmp_datas = this.data.init_datas;
      console.dir(tmp_datas);
      this.setData({
        nz_datas: tmp_datas,
        class:1
      })
    }
    if(cur==2){
      this.setData({
        init_datas1: man_data,
        currentTab1: 1
      })
      var tmp_datas = this.data.init_datas1;
      console.dir(tmp_datas);
      this.setData({
        nz_datas: tmp_datas,
        class:2
      })
    }
  },

  switchNav1: function (event) {
    var cur = event.currentTarget.dataset.curr;
    console.log("switchNav1_curr="+cur);
    console.log("class=" + this.data.class);
    if (this.data.currentTab1 == cur) { return false; }
    else {
      this.setData({
        currentTab1: cur
      })
    }

    if(cur==1){
      if(this.data.class==1){
        var tmp_datas = this.data.init_datas;
        this.setData({
          nz_datas: tmp_datas
        })
      }
      if (this.data.class == 2) {
        var tmp_datas = this.data.init_datas1;
        this.setData({
          nz_datas: tmp_datas
        })
      }
    }
    if(cur==2){
      if (this.data.class == 1){
        var tmp_datas = this.data.init_datas;
        var tmp_data = tmp_datas.nzList;
      }
      if (this.data.class == 2) {
        var tmp_datas = this.data.init_datas1;
        var tmp_data = tmp_datas.manList;
      }
      var tmp_arr=[];
      var tmp_arr1=[];
      for(var i=0;i<tmp_data.length;i++){
        tmp_arr.push(tmp_data[i][0].sales);
        tmp_arr.push(tmp_data[i][1].sales);
      }
      for(var i=0;i<tmp_arr.length-1;i++){
        for(var j=i+1;j<tmp_arr.length;j++){
          if(tmp_arr[i]<tmp_arr[j]){
            var tmp=tmp_arr[i];
            tmp_arr[i]=tmp_arr[j];
            tmp_arr[j]=tmp;
            var tmp = tmp_data[Math.floor(i/2)][i%2];
            tmp_data[Math.floor(i / 2)][i % 2] = tmp_data[Math.floor(j / 2)][j%2];
            tmp_data[Math.floor(j / 2)][j%2]=tmp;
          }
        }
      }
      if (this.data.class == 1) {
        var obj = {
          nzList: tmp_data
        }
      }
      if (this.data.class == 2) {
        var obj = {
          manList: tmp_data
        }
      }
      this.setData({
        nz_datas: obj
      })
    }
    if(cur==3){
      if (this.data.class == 1) {
        var tmp_datas = this.data.init_datas;
        var tmp_data = tmp_datas.nzList;
      }
      if (this.data.class == 2) {
        var tmp_datas = this.data.init_datas1;
        var tmp_data = tmp_datas.manList;
      }
      var tmp_arr = [];
      var tmp_arr1 = [];
      for (var i = 0; i < tmp_data.length; i++) {
        tmp_arr.push(tmp_data[i][0].price - tmp_data[i][0].coupon);
        tmp_arr.push(tmp_data[i][1].price - tmp_data[i][1].coupon);
      }
      for (var i = 0; i < tmp_arr.length - 1; i++) {
        for (var j = i + 1; j < tmp_arr.length; j++) {
          if (tmp_arr[i] > tmp_arr[j]) {
            var tmp = tmp_arr[i];
            tmp_arr[i] = tmp_arr[j];
            tmp_arr[j] = tmp;
            var tmp = tmp_data[Math.floor(i / 2)][i % 2];
            tmp_data[Math.floor(i / 2)][i % 2] = tmp_data[Math.floor(j / 2)][j % 2];
            tmp_data[Math.floor(j / 2)][j % 2] = tmp;
          }
        }
      }
      if(this.data.class == 1) {
        var obj = {
          nzList: tmp_data
        }
      }
      if (this.data.class == 2) {
        var obj = {
          manList: tmp_data
        }
      }
      this.setData({
        nz_datas: obj
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

后面又做了一个雷同的界面,发现数据还是有问题


结果发现点击销量最多,再点击小编推荐,数据保持在销量最多状态,这里很明了就是更改原始数据本身的问题。只需要每次点击tab标签时对操作数据进行重置就好。

switchNav1: function (event) {
    this.setData({
      init_datas: nz_data
    })


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值