基于vue的移动端商城的产品列表实现触底加载记录滚动条位置

基于vue的移动端商城的产品列表实现记录滚动条位置

• 产品列表页

产品列表页

众所周知，一般我们移动端的商城列表，为了用户体验，都会做滚动翻页，也就是触底加载，而这时会有这么一个需求，就是用户想点进详情页或者去某个页面然后返回到首页，仍然想停留在上次浏览的位置，可是路由一改变，状态是很难保存的，这个时候就需要我们做一些处理了。

首先这是触底加载，触底加载比较简单，就监听滚动条的位置，然后做一下判断就ok了，当然我这里其实可以优化的，比如加防抖节流。

这一步写在mounted里面

let _this = this;
    window.onscroll = function () {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      
      // 这里实时保存滚动条位置
      _this.gallery_scroll = document.documentElement.scrollTop;
      
      if (scrollTop + windowHeight >= scrollHeight - 1500) {
        //到了这个就可以进行业务逻辑加载后台数据了
        // _this.footerText = "我是有底线的";
        // console.log("到了底部");

        if (_this.list.length < _this.total && _this.isLoding) {
          _this.setIsLoding();
          setTimeout(() => {
            // 加载数据
            _this.storeGetIndexListPage();
          }, 200);
        }
      }
    };

记录滚动条位置

由上一步

   // 这里实时保存滚动条位置
     _this.gallery_scroll = document.documentElement.scrollTop;

获取并保存到的滚动条位置，在跳转的时候进行本地存储

  // 跳转详情
    gotoInfo(i) {
      let that = this;
      // 这里我们把滚动条位置存进localstorage,其实也可以存进vuex里面，但是我们做微信分享的时候，为了兼容ios做了重定向，就考虑太多了，其实都可以
      localStorage.setItem("gallery_scroll", this.gallery_scroll);
      
      this.$router.push({
        path: "/info",
        query: {
          id: that.list[i].id,
        },
      });
    },

返回后获得跳转前滚动条位置并且设置

if (localStorage.getItem("gallery_scroll")) {
	 document.documentElement.scrollTop = ~~localStorage.getItem(
	    "gallery_scroll"
	  );
	} else {
	  this.setParams();
	  this.setlodingStatic(true);
	  setTimeout(() => {
	    this.storeGetIndexListPage();
	  }, 300);
	}

对了，数据也要进行持久化存储，我是存在vuex里面的，当然和滚动条位置同理，也可以存本地，
上面这一步进行了判断，本地是否存有滚动条位置，以此来判断是否重新加载数据。

最后也是比较重要的一步

在App.vue的生命周期里，对它进行销毁

 destroyed() {
      localStorage.removeItem("gallery_scroll");
  }

ok，这就是基于vue的移动端商城的产品列表实现触底加载记录滚动条位置。

本文地址：https://blog.csdn.net/beyoungod/article/details/109378652