vue scroller返回页面记住滚动位置的实例代码
2018-01-29 15:31
1096 查看
1,设置keepAlive:是否缓存
router: { path: '/actlist', name: 'actlist', component: actlist, meta: { keepAlive: true } }
2,设置渲染页面
app.vue
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
3,记录滚动位置并赋值
beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置 sessionStorage.askPositon = ''; next(); }else{ next(vm => { if(vm && vm.$refs.my_scroller){//通过vm实例访问this setTimeout(function () { vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true); },0)//同步转异步操作 } }) } }, beforeRouteLeave(to,from,next){//记录离开时的位置 sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top; next() }
总结
以上所述是小编给大家介绍的vue scroller返回页面记住滚动位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
- js:返回到页面时滚动到上次浏览位置
- 不用锚点也可以平滑滚动到页面的指定位置实现代码
- div当滚动到页面顶部的时候固定在顶部实例代码
- div当滚动到页面顶部的时候固定在顶部实例代码
- 不用锚点也可以平滑滚动到页面的指定位置实现代码
- jQuery页面滚动浮动层智能定位实例代码
- 页面刷新时记住滚动条的位置jquery代码
- 页面刷新时记住滚动条的位置jquery代码
- javascript获取鼠标位置部分的实例代码(兼容IE,FF)
- asp.net小技巧:页面滚动位置保持
- 带有定位当前位置的百度地图前端web api实例代码
- HorizontalScrollView+GridView 设置初始进入页面后平滑的滚动到girdView的某一给定位置
- 微信小程序之判断页面滚动方向的示例代码
- jQuery下的返回顶部功能的实现实例页面
- 实现页面返回要求记录用户刚刚浏览的位置
- jquery实现文字由下到上循环滚动的实例代码
- 关于 echo Project : error PRJ0019: 某个工具从以下位置返回了错误代码: "正在执行预链接事件..."