Vue开发问题—— mescroll滚动懒加载，以及保留滚动条位置。

系列文章目录

Vue-cli3 ，js根据汉字或拼音模糊搜索功能,汉字支持同音字、多音字，支持首字母
Vue开发问题——axios二次封装，请求、响应拦截器。
Vue开发问题——打包后首页白屏，cli3设置vue.config.js 使用proxy配置跨域

---

---

前言

1、mescroll使用， 官网 mescroll(点击直达)
2、需求：比如List展示页面时有10项，点击第10个进入详情页，返回后此时列表刷新，并不能固定到第10项，只能重新从第1项往下划。非常不友好。并且配合路由守卫，和组件独享守卫，路由守卫的配合踩坑。
3、各类博客对于keepAlive描述不准确，并且对于初步的使用者来说如何获取 mescroll 的参数，并没有提，白白踩坑。所以还是建议先看官网，再百度。
4、感谢两位博主
vue组件返回时保留滚动的位置
vue使用keep-alive保持滚动条位置的实现

---

一、mescroll使用

1、官网写的没啥不一样

<mescroll-vue
      ref="mescroll"
      @init="mescrollInit"
      :down="mescrollDown"
      :up="mescrollUp"
    >
    ...
</mescroll-vue>

vue 的data里面

	mescroll:null,
	mescrollUp: {
	  use: true,
	  auto: false,
	  offset: 40,
	  callback: this.upAction,
	  htmlNodata: "",
	  htmlLoading: "",
	},
	mescrollDown: {
	  use: true,
	  auto: false,
	  offset: 40,
	  callback: this.downAction,
	},

methods

mescrollInit(mescroll) {
        this.mescroll = mescroll;
      },
      //下拉刷新
      pullDownToRefresh(mescroll) {
        this.mescrollUp.use = true
        this.havepagedata = true
        this.commentStatus = '点击或上滑加载更多内容'
        this.lists=[]
        this.page = 0
        if(this.sayType == 0){
          this.getfriendsList()
        }else{
          this.getAllList()
        }
      },
      downAction() {
        this.pullDownToRefresh(this.mescroll);
        this.mescroll.endSuccess();
      },
      //上滑加载
      pullUpToRefresh(mescroll) {
        if(this.lists.length > 4 && this.havepagedata == true){
          // 短时间只触发一次上滑加载
          var time = new Date().getTime();
          if (time - this.timestamp <= 1000) return;
          this.timestamp = time;

          this.page++
          this.getAllList()
        }
      },
      upAction() {
        this.pullUpToRefresh(this.mescroll);
        this.mescroll.endSuccess();
      },
      // 列表有一行文字叫【点击上滑加载】这里点击直接手动加载下一页数据
      refreshData(){
        if (this.commentStatus == '点击或上滑加载更多内容') {
          this.upAction();
        }
      },

获取列表也得改一下不能直接赋值，得后续获取到的数据往之前的List去push()

ync getAllList(){
        let data = {
          ...
          ...,
        }
        let res = await this.getList(data) //请求数据
        if(this.page == 0 && res.dataList.length == 0){
         //第一页获取数据为0 ，展示的文字，官网应该有，但是我不会哈哈哈哈哈哈
          this.isNodataTips = "大家有点懒，暂时还没有动态~"
        }
        this.pushLists(res)
      },
      pushLists(res){
        if (res.code != 0) {
        //错误提示
          toast.show(res.message);
        } else {
        //把获取到的每一项，往总List里面push()
          var myLists = res.dataList;
          var len = myLists.length;
          if(len>0){
            myLists.map(item =>{
              this.lists.push(item)
            })
            if(len > 0 &&len < 15){
              this.commentStatus = '没有更多记录啦'//我一页是15条数据，所以说小于15条就是最后一页了
            }
          }else{
            this.commentStatus = '没有更多数据了'
            toast.show("没有更多记录啦",false);
            this.havepagedata = false //防止每次请求还没回来就去继续请求，防抖的一个措施吧
          }
        }
      },

注意：因为初始化函数`@init="mescrollInit"`这个，
在最初的时候就把data里面的`mescroll:null`这里赋值了，所以不用通过`this.$refs`去获取

二、如何保持滚动

1.keepAlive的设置

如同上面引用的文章
1、首先给路由增长一个对象meta，去设置keepAlive:true是没问题的

{
    // 广场首页
    name: 'squareHome',
    path: 'squareHome',
    meta: { tname: '广场',keepAlive:true},
    component: squareHome,
    
},

2、而后在app.vue增加入口去启用启用keep-alive的效果：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive":key="$route.name"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="$route.name"></router-view>

这里的就是没有需要缓存的页面就正常显示 ，需要的就走keep-alive
问题在于，如果只有1个页面使用keep-alive，可以不加key参数，但是多个页面使用，就必须加，不加不会报错，但是如果两个页面都有keepAlive:true，就不会缓存成功。所以上述必须加上:key="$route.name"，保证所有设置缓存的页面不会冲突。

3、路由守卫
有大佬建议在main.js中加入全局路由守卫，但是vue实例的this是无法获取的
所以只能建立路由独享守卫

//从广场进入页面时刷新数据，其他页面进入时跳转到上次浏览位置
    beforeRouteEnter(to, from, next) {
      if (from.name == 'squareHome') {
        next(vm => {
          vm.getAllList()
        });
      } else{
        next(vm => {
          vm.mescroll.scrollTo(vm.$route.meta.scrollTop,0)
          vm.page = vm.$route.meta.page
        });
      }
    },
    //离开页面的时候1、保存当前滚动位置2、当前页码到route信息
    beforeRouteLeave(to, from, next){
      this.$route.meta.scrollTop = this.mescroll.preScrollY
      this.$route.meta.page = this.page
      next()
    },

帮到你的话，点个赞吧d====(￣▽￣*)b
——Lazy33