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

太过爱你忘了你带给我的痛 2022-05-31 00:59 293阅读 0赞

SouthEast

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

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

主要场景是：点击女装，再点击男装，再点击女装。

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

  1. var nz_data=require("../../data/nz.js");
  2. var man_data = require("../../data/man.js");
  3. // pages/reduce/reduce.js
  4. Page({
  6.   /**
  7.    * 页面的初始数据
  8.    */
  9.   data: {
  10.     currentTab:1,
  11.     currentTab1:1,
  12.     nz_datas:[],
  13.     class:1,
  14.     init_datas:[],
  15.     init_datas1:[]
  16.   },
  18.   /**
  19.    * 生命周期函数--监听页面加载
  20.    */
  21.   onLoad: function (options) {
  22.     console.log(nz_data);
  23.     this.setData({
  24.       nz_datas: nz_data,
  25.       init_datas: nz_data
  26.     })
  28.     console.log(this.data.nz_datas);
  29.   },
  31.   toDetail: function (e) {
  32.     var pid=e.currentTarget.dataset.pid;
  33.     console.log("pid="+pid);
  34.     wx.navigateTo({
  35.       url: './detail/detail?pid='+pid
  36.     })
  37.   },
  39.   switchNav: function(event) {
  40.     var cur = event.currentTarget.dataset.current;
  41.     if (this.data.currentTab == cur) { return false; }
  42.     else {
  43.       this.setData({
  44.         currentTab: cur
  45.       })
  46.     }
  48.     if(cur==1){
  49.       this.setData({
  50.         init_datas: nz_data,
  51.         currentTab1: 1
  52.       })
  53.       var tmp_datas = this.data.init_datas;
  54.       console.dir(tmp_datas);
  55.       this.setData({
  56.         nz_datas: tmp_datas,
  57.         class:1
  58.       })
  59.     }
  60.     if(cur==2){
  61.       this.setData({
  62.         init_datas1: man_data,
  63.         currentTab1: 1
  64.       })
  65.       var tmp_datas = this.data.init_datas1;
  66.       console.dir(tmp_datas);
  67.       this.setData({
  68.         nz_datas: tmp_datas,
  69.         class:2
  70.       })
  71.     }
  72.   },
  74.   switchNav1: function (event) {
  75.     var cur = event.currentTarget.dataset.curr;
  76.     console.log("switchNav1_curr="+cur);
  77.     console.log("class=" + this.data.class);
  78.     if (this.data.currentTab1 == cur) { return false; }
  79.     else {
  80.       this.setData({
  81.         currentTab1: cur
  82.       })
  83.     }
  85.     if(cur==1){
  86.       if(this.data.class==1){
  87.         var tmp_datas = this.data.init_datas;
  88.         this.setData({
  89.           nz_datas: tmp_datas
  90.         })
  91.       }
  92.       if (this.data.class == 2) {
  93.         var tmp_datas = this.data.init_datas1;
  94.         this.setData({
  95.           nz_datas: tmp_datas
  96.         })
  97.       }
  98.     }
  99.     if(cur==2){
  100.       if (this.data.class == 1){
  101.         var tmp_datas = this.data.init_datas;
  102.         var tmp_data = tmp_datas.nzList;
  103.       }
  104.       if (this.data.class == 2) {
  105.         var tmp_datas = this.data.init_datas1;
  106.         var tmp_data = tmp_datas.manList;
  107.       }
  108.       var tmp_arr=[];
  109.       var tmp_arr1=[];
  110.       for(var i=0;i<tmp_data.length;i++){
  111.         tmp_arr.push(tmp_data[i][0].sales);
  112.         tmp_arr.push(tmp_data[i][1].sales);
  113.       }
  114.       for(var i=0;i<tmp_arr.length-1;i++){
  115.         for(var j=i+1;j<tmp_arr.length;j++){
  116.           if(tmp_arr[i]<tmp_arr[j]){
  117.             var tmp=tmp_arr[i];
  118.             tmp_arr[i]=tmp_arr[j];
  119.             tmp_arr[j]=tmp;
  120.             var tmp = tmp_data[Math.floor(i/2)][i%2];
  121.             tmp_data[Math.floor(i / 2)][i % 2] = tmp_data[Math.floor(j / 2)][j%2];
  122.             tmp_data[Math.floor(j / 2)][j%2]=tmp;
  123.           }
  124.         }
  125.       }
  126.       if (this.data.class == 1) {
  127.         var obj = {
  128.           nzList: tmp_data
  129.         }
  130.       }
  131.       if (this.data.class == 2) {
  132.         var obj = {
  133.           manList: tmp_data
  134.         }
  135.       }
  136.       this.setData({
  137.         nz_datas: obj
  138.       })
  139.     }
  140.     if(cur==3){
  141.       if (this.data.class == 1) {
  142.         var tmp_datas = this.data.init_datas;
  143.         var tmp_data = tmp_datas.nzList;
  144.       }
  145.       if (this.data.class == 2) {
  146.         var tmp_datas = this.data.init_datas1;
  147.         var tmp_data = tmp_datas.manList;
  148.       }
  149.       var tmp_arr = [];
  150.       var tmp_arr1 = [];
  151.       for (var i = 0; i < tmp_data.length; i++) {
  152.         tmp_arr.push(tmp_data[i][0].price - tmp_data[i][0].coupon);
  153.         tmp_arr.push(tmp_data[i][1].price - tmp_data[i][1].coupon);
  154.       }
  155.       for (var i = 0; i < tmp_arr.length - 1; i++) {
  156.         for (var j = i + 1; j < tmp_arr.length; j++) {
  157.           if (tmp_arr[i] > tmp_arr[j]) {
  158.             var tmp = tmp_arr[i];
  159.             tmp_arr[i] = tmp_arr[j];
  160.             tmp_arr[j] = tmp;
  161.             var tmp = tmp_data[Math.floor(i / 2)][i % 2];
  162.             tmp_data[Math.floor(i / 2)][i % 2] = tmp_data[Math.floor(j / 2)][j % 2];
  163.             tmp_data[Math.floor(j / 2)][j % 2] = tmp;
  164.           }
  165.         }
  166.       }
  167.       if(this.data.class == 1) {
  168.         var obj = {
  169.           nzList: tmp_data
  170.         }
  171.       }
  172.       if (this.data.class == 2) {
  173.         var obj = {
  174.           manList: tmp_data
  175.         }
  176.       }
  177.       this.setData({
  178.         nz_datas: obj
  179.       })
  180.     }
  181.   },
  183.   /**
  184.    * 生命周期函数--监听页面初次渲染完成
  185.    */
  186.   onReady: function () {
  188.   },
  190.   /**
  191.    * 生命周期函数--监听页面显示
  192.    */
  193.   onShow: function () {
  195.   },
  197.   /**
  198.    * 生命周期函数--监听页面隐藏
  199.    */
  200.   onHide: function () {
  202.   },
  204.   /**
  205.    * 生命周期函数--监听页面卸载
  206.    */
  207.   onUnload: function () {
  209.   },
  211.   /**
  212.    * 页面相关事件处理函数--监听用户下拉动作
  213.    */
  214.   onPullDownRefresh: function () {
  216.   },
  218.   /**
  219.    * 页面上拉触底事件的处理函数
  220.    */
  221.   onReachBottom: function () {
  223.   },
  225.   /**
  226.    * 用户点击右上角分享
  227.    */
  228.   onShareAppMessage: function () {
  230.   }
  231. })

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

SouthEast 1

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

  1. switchNav1: function (event) {
  2.     this.setData({
  3.       init_datas: nz_data
  4.     })

发表评论

表情：
评论列表 （有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读