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

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

![SouthEast][]

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

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

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

后面我在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 () {
      
      }
    })

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

![SouthEast 1][]

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

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

[SouthEast]: /images/20220531/51fa4f21b1b747f8946e82cbb8871ec3.png
[SouthEast 1]: /images/20220531/ca407de8759145b69f07a431a3d1d83c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

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

相关阅读

相关 react antd的tab标签切换时调用方法

源码： //defaultActiveKey:默认选择的版面 //activeKey：切换后的版面 <Tabs defaultActiveKey="0" active

今天药忘吃喽~/ 2023年05月30日 04:59/ 0 赞/ 7 阅读

相关微信小程序 - 原生Tab 标签页切换（轮子）

效果图可根据需求来修改样式或封装成组件。 ![在这里插入图片描述][20200806104753176.gif] wxml <!-- tab框 --

太过爱你忘了你带给我的痛/ 2022年11月24日 12:57/ 0 赞/ 648 阅读

相关 tab切换延时问题。

tab切换延时问题，困扰我一整天，一般tab切换效果鼠标快速划过后就会闪的特别厉害，我就想加个延时效果，于是用上了settimeout方法，结果发现又出现了另外一个问题

心已赠人/ 2022年09月19日 14:24/ 0 赞/ 197 阅读

相关小程序 tab切换

index.wxml <view class="{ {currentTab==1?'active1':''}}" data-current="1" bi

迈不过友情╰/ 2022年06月01日 12:24/ 0 赞/ 256 阅读

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

![SouthEast][] 出现的问题就是例如在女装时点击了销量最多，然后点击男装，发现男装的小编推荐既然对应的是销量最多的界面，当时就懵逼了。后来检测才发现，我的代码

太过爱你忘了你带给我的痛/ 2022年05月31日 00:59/ 0 赞/ 245 阅读

相关小程序标签切换

<view class='centData-cent'> <view wx:for="{ {menudata}}" data-numb="{

梦里梦外;/ 2022年04月04日 10:44/ 0 赞/ 208 阅读

相关微信小程序-Tab标签

index.wxml <view class='itemContent'>  <view class="swiper

拼搏现实的明天。/ 2022年03月09日 15:40/ 0 赞/ 316 阅读

相关浏览器tab标签切换时触发事件

document.addEventListener('visibilitychange',function(){ //浏览器切换事件 if(document

怼烎@/ 2022年02月22日 14:38/ 0 赞/ 439 阅读

相关小程序——Tab切换

<view class="body"> <view class="nav bc_white"> <view class="{

爱被打了一巴掌/ 2021年09月30日 08:52/ 0 赞/ 361 阅读

相关解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab

解决Echarts在微信小程序tab切换时的显示会出现位置移动问题我的js var dateTimePicker = require('../../utils/d

向右看齐/ 2021年09月17日 02:48/ 0 赞/ 351 阅读