当前位置: 首页 > 工具软件 > mescroll > 使用案例 >

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

苗冯浩
2023-12-01

系列文章目录

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

 类似资料: