uniapp解决首页列表替换数据闪烁问题

解决思路:将列表数据和page缓存,在页面执行onshow时,加载列表,比对缓存的数据和新获取的是否一致,一致的话就不更新。

需要初始化的参数

page: 1,

limit: 10,

goodList: [],

onShow() {
   var that = this;
   if(!shop_list){
    that.page = 1;
    that.goodList = [];
   }
   that.initData2();
},
initData2() {
    console.log('我到底执行了没有');
    var that = this;
    var url = 'member/shop-goods';
    var data = {
     page: that.page,
     limit: that.limit
    }
    that.util.asynRequest(url, data, 'post',
     function(res) {
      console.log(res.data.list);
      console.log(res.data.allnum);
      that.goodNum = res.data.allnum;
      
      if (res.data.list.length > 0) {
       if (that.page == 1) {
        uni.setStorageSync('shop_page',that.page)
        var shop_list = uni.getStorageSync('shop_list');
        console.log('shop_list:',shop_list);
        var list = res.data.list;
        if(shop_list){
         if(shop_list.length == list.length){
          var count = 0;
          for(var i = 0; i < shop_list.length; i++){
           if(shop_list[i].goodsId != list[i].goodsId){
            count ++;
           }
          }
          if(count > 0){
           that.goodList = list;
           uni.setStorageSync('shop_list',list)
          }
         }else{
          uni.setStorageSync('shop_page',1)
          that.goodList = res.data.list;
         }
         
        }else{
         console.log('999999999999');
         that.goodList = res.data.list;
         uni.setStorageSync('shop_list',res.data.list)
         var shop_list = uni.getStorageSync('shop_list');
         console.log('shop_list:',shop_list);
        }
        
       } else {
        
        var old_page = uni.getStorageSync('shop_page')
        if(old_page < that.page){
         that.goodList = that.goodList.concat(res.data.list);
         uni.setStorageSync('shop_page',that.page)
        }
       }
      } else {
       if (that.page > 1) {
        that.page--;
        uni.setStorageSync('shop_page',that.page)
       }else{
        that.show_a = true;
        that.list = [];
       }
       if (that.token && that.goodList.length != 0) {
        that.util.showToast('暂无更多数据!')
       }
      }
      that.$forceUpdate()
      console.log('that.goodList', that.goodList)
     },
     function(err) {
      console.log('==========888=========', err);
      if (that.page > 1) {
       uni.setStorageSync('shop_page',that.page)
       that.page--;
      }else{
       that.show_a = true;
      }
     })
},

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值