欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-20 08:36:42
基于vue的移动端商城的产品列表实现记录滚动条位置产品列表页记录滚动条位置返回后获得跳转前滚动条位置并且设置最后也是比较重要的一步产品列表页众所周知,一般我们移动端的商城列表,为了用户体验,都会做滚动翻页,也就是触底加载,而这时会有这么一个需求,就是用户想点进详情页或者去某个页面然后返回到首页,仍然想停留在上次浏览的位置,可是路由一改变,状态是很难保存的,这个时候就需要我们做一些处理了。首先这是触底加载,触底加载比较简单,就监听滚动条的位置,然后做一下判断就ok了,当然我这里其实可以优化的,比如加防抖...

产品列表页

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

首先这是触底加载,触底加载比较简单,就监听滚动条的位置,然后做一下判断就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