1. 程式人生 > >小程式 tab標籤切換時出現數據狀態保留的問題

小程式 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
    })


相關推薦

程式 tab標籤切換出現狀態保留的問題

出現的問題就是例如在女裝時點選了銷量最多,然後點選男裝,發現男裝的小編推薦既然對應的是銷量最多的介面,當時就懵逼了。 後來檢測才發現,我的程式碼在點選銷量最多和價格最優的時候對設定的初始模擬資料進行了直接操作,導致其資料本身發生變化。導致切換女裝/男裝時初始介面(資料)不

微信程式返回上級頁面單個互動

微信小程式返回上級頁面時單個數據互動 實現原理:目標頁面利用小程式的頁面棧查詢上級頁面的page物件,並在不重新整理頁面的情況下修改上級頁面的data單條或多條資料。 實現程式碼: const wxCurrPage = getCurrentPages();//獲取當前頁面的頁面棧

程式tab導航切換樣式

    <view id="green" class="scroll-view-item {{ current == index ? 'active' :'' }} " bindtap="yearselect" wx:for="{{year}}" wx:key="{{inde

WX程式TAB切換 / 程式商品分類

Page({ /** * 頁面的初始資料 */ data: { selected: true, selected1: false, selected2: false, //模擬資料 cateItems: [

STM32F103ZE微控制器FSMC介面讀取NAND Flash晶片K9F1G08U0E的資料出現丟失的解決辦法

【問題】 STM32微控制器使用FSMC讀取K9F1G08U0E NAND Flash時,出現部分位元組丟失的情況。例如:Flash儲存器中儲存有連續的0xff位元組,則在進行連續讀(Page Read)操作時可能會丟失部分0xff。 例如,寫入以下資料到某一頁的開頭(

程式路由傳參的時候出現丟失

在寫把操作的答案通過路由傳參的形式傳到下一個頁面的時候,在下一個頁面獲取的時候資料被截取了  解決辦法 使用  encodeURIComponent        進行加密 然後再另外一個頁面獲取的時候使用   

使用iview weapp元件 寫程式 tab切換

  wxml: <i-row class="tab_question"><i-col span="24" i-class="col-class"><i-tabs current="{{ current }}" color="#f759ab" bindchange

微信程式Tab切換下面的圖表顯示

之前沒有怎麼做過小程式,最近公司需要剛上來就做圖表,這對於我來說是一個挑戰。 在沒做之前覺得沒什麼,但是後來有一個很大的bug。就是在做Tab切換的時候,我發現頁面不管是上下還是左右滑動的時候圖表會懸浮在上面,不會隨著頁面進行移動。 結果發現swiper和s

程式tab切換

程式碼html css程式碼 page{ background-color: #f4f4f4;}.page { height: 100%;}.box{ width: 100%; height: 80rpx; background: #59b550;

程式tab切換,內容高度自適應

<view class='aboutusContainer'> <image src='/assets/images/company.png' class='companyLogo'></image> <view cl

微信程式---tab切換

微信小程式開發中選項卡.在android中選項卡一般用fragment,到了小程式這裡瞬間懵逼了. 總算做出來了.分享出來看看. 先看效果: 再上程式碼: 1.index.wxml <!--index.wxml--> <viewcla

微信程式 tab切換

設定背景顏色就直接在page裡設定    page {background-color: rgb(242, 242, 242);} tab切換: navigator 頁面連結 傳參的格式為url="路徑?title={{item.title}}"   多個用&a

微信程式下拉重新整理頂部tab元素不隨著下拉移動

頂部tab元素用fixed固定,設定了top屬性。發下在微信小程式中使用onPullDownRefresh()時,頂部tab元素不隨著下拉操作移動。所以將tab元素的top屬性取消,這樣就可以實行頂部t

微信程式Tab 切換,下拉重新整理,上拉載入(適用1221)

點評:展示方面,可以學習一下;比較簡單;12月1日更新,已經適用最新112301Features 頂部 Tab 切換 下拉重新整理 上拉載入更多 登入註冊PS 下拉重新整理需要在全域性的 app.json 裡配置 [AppleScript] 純文字檢視 複製程式碼

SQL Server2012使用導入和導出向導,用sql語句作為數源,出現源類型會變成202或者203

tegra 程序 保存 ons tail nis sdn 信息 ping 用MS SqlServer2012進行數據導出時,使用的查詢語句導出,但是出現了錯誤: “發現 xx個未知的列類型轉換您只能保存此包“ 點擊列查看詳細錯誤信息時,可以看到: [源信息]源位置: 192

微信程序--Tab切換的快速實現

font log borde 1-1 enter cnblogs 小程序 ont justify 上效果!    wxss樣式代碼: 1 .tabs-item.selected { 2 color:rgba(171,149,109,.8);

微信程序tab切換

-c ase iss fun ren active hid get clas index.wxml <text data-current="0" class="{{currentTab == 0? ‘active‘ : ‘‘}}">消息</text&g

程式tab + swiper 實現tab下輪播

<view class="course-advantage"> <view class="list-active-tab course-types-tab"> <view class="container"> <view

微信程式 選項卡切換+swiper自適應高度

如圖所示一個,具體步驟如下: 一、wxml部分 <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" b

微信程式 獲取標籤裡面的自定義資料

<view wx:for="{{receiverlist}}" wx:for-item="receiver" wx:key="" wx:for-index="idx"> <input type='number' value='{{salesNumber}}' data-na