VUE 列表页跳转到详情页，点击返回上一页，回到原来的位置

一、利用vuex在store/index.js中

• 记录滚动条历史高度
• 记录列表页分页页数

let store = new Vuex.Store({
  state: {
    myHistroy: {
      pageNum: 1, // 列表页分页页数
      scrollTop: 0， // 滚动条历史高度
    },
  },
  mutations: {
    MYHISTROY: (state, myHistroy) => {
      state.myHistroy= myHistroy;
    },
  },

二、在my/index.vue中

1、HTML结构

• 根据ref获取元素回到滚动条记录历史高度
• 注：该方法所执行的基础是10条数据的高度总和应大于列表盒子固定高度

  <ul class="my_list" ref="my_list" @scroll="scrollEvent">
    <li v-for="(item, index) in myList" :key="item.id"></li>
  </ul>

2.滚动加载分页方法以及所需变量配置

  data() {
    return {
      isUpdate: true, // 是否到底-最后一页
      filter: {
        count: 10, // 页大小
        page: 1, // 当前页
        params: {
          status: "0"， // 额外传参 
        }
      },
      myList: [], // 列表数据集合
      total: 0, // 一共有多少条数据
      scrollTop: 0， // 滚动条高度
    }
  },
  // 离开当前页面时触发的卫士
  beforeRouteLeave(to,from,next) {
    if(to.path == "/order/details") {
      this.$store.state.myHistroy.pageNum = this.filter.page;
      this.$store.state.myHistroy.scrollTop = this.scrollTop;
    }
    next()
  },
  // 进入当前页面时触发的卫士
  beforeRouteEnter(to,from,next) {
    next(vm => {
      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      if(from.path !== "/order/details"){
        vm.$store.state.myHistroy.pageNum = 1;
        vm.$store.state.myHistroy.scrollTop = 0;
      } else {
      }
    })
  },
  mounted() {
    this.loadData();
  },
  methods: {
    // 首次加载 
    loadData() {
      if(this.$store.state.myHistroy.pageNum > this.filter.page) {
        this.filter.count = Number(this.filter.count*this.$store.state.myHistroy.pageNum);
      }
      let data = {
        count: this.filter.count, // 页大小
        page: this.filter.page, // 当前页
        params: {
          status: this.filter.params.status
        }
      }
      api.list(data).then(res => {
        if(res.status == 0 && res.data.results.length != 0){
          this.myList= res.data.results;
          this.total = res.data.count;
          
          if(this.$store.state.myHistroy.pageNum > this.filter.page) {
            this.filter.count = 10;
            this.filter.page = this.$store.state.myHistroy.pageNum;
            setTimeout(() => {
              this.$refs.my_list.scrollTo(0, this.$store.state.myHistroy.scrollTop);
            }, 1000)
          }
 		}
      }).catch(() => {
      });
    },
    // 下拉数据更新加载 
    updateData() {
      let data = {
        count: this.filter.count, // 页大小
        page: this.filter.page, // 当前页
        params: {
          status: this.filter.params.status
        }
      }
      api.list(data).then(res => {
        if(res.status == 0 && res.data.results.length != 0){
          var myList = this.myList;
          res.data.results.forEach(function (item){
            myList.push(item);
          })
          this.myList = myList;
          this.total = res.data.count;
        } else {
          this.filter.page -= 1;
          if(res.data.results.length == 0) {
            this.isUpdate = false;
            this.$message.warning("到底了");
          } else {
          this.$message.error("操作失败");
          }
        }
      }).catch(() => {
        this.filter.page -= 1;
          this.$message.error("操作失败");
      });
    },
   // 列表滚动事件
    scrollEvent (e) {
      this.scrollTop = e.srcElement.scrollTop;
      if ((e.srcElement.offsetHeight + e.srcElement.scrollTop) - e.srcElement.scrollHeight === 0) {
        if(this.isUpdate) {
          this.filter.page += 1;
          this.updateData();
        } else {
            this.$message.warning("到底了");
        }
      }
    },
  }

3.列表样式

  my_list{
    height: 100vh; // 设置固定高度
    overflow: scroll;
    li {
      background-color: #ffffff;
      margin-bottom: 0.20rem;
	}
  }