系列文章目录
Vue-cli3 ，js根据汉字或拼音模糊搜索功能,汉字支持同音字、多音字，支持首字母
Vue开发问题——axios二次封装，请求、响应拦截器。
Vue开发问题——打包后首页白屏，cli3设置vue.config.js 使用proxy配置跨域
mescroll使用，以及keep-alive的使用遗漏点
系列文章目录前言一、mescroll使用二、如何保持滚动1.keepAlive的设置前言
1、mescroll使用， 官网 mescroll(点击直达)
2、需求：比如List展示页面时有10项，点击第10个进入详情页，返回后此时列表刷新，并不能固定到第10项，只能重新从第1项往下划。非常不友好。并且配合路由守卫，和组件独享守卫，路由守卫的配合踩坑。
3、各类博客对于keepAlive描述不准确，并且对于初步的使用者来说如何获取 mescroll 的参数，并没有提，白白踩坑。所以还是建议先看官网，再百度。
4、感谢两位博主
vue组件返回时保留滚动的位置
vue使用keep-alive保持滚动条位置的实现
一、mescroll使用
1、官网写的没啥不一样
<mescroll-vueref="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 = truethis.havepagedata = mentStatus = '点击或上滑加载更多内容'this.lists=[]this.page = 0if(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 (mentStatus == '点击或上滑加载更多内容') {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){mentStatus = '没有更多记录啦'//我一页是15条数据，所以说小于15条就是最后一页了}}else{mentStatus = '没有更多数据了'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.preScrollYthis.$route.meta.page = this.pagenext()},
帮到你的话，点个赞吧d====(￣▽￣*)b
——Lazy33
