vue-scroller记录滚动位置的示例代码
问题描述:
列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置
解决问题思路:
切换到其他页面前记录位置,返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.
还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的。
代码部分:
beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置 sessionStorage.askPositon = ''; next(); }else{ next(vm => { if(vm && vm.$refs.scrollerBottom){//通过vm实例访问this setTimeout(function () { vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false); },0)//同步转异步操作 } }) } }, beforeRouteLeave(to,from,next){//记录离开时的位置 sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top; next() },
需要注意的点:
1.熟悉vue-router和vue-scroller的api
2.beforeRouteEnter的时候,是无法通过this去访问vue实例的,需要借助于vm
3.setTimeout 0 的使用
等下周发版的时候,我贴上链接,可以体验下效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue的el-scrollbar实现自定义滚动
为什么要用el-scrollbar? 最近在写一个内部平台系统,相信大家都知道,其中会有很多自定义的滚动区域,就比如说现在有一个列表需要滚动,第一个念头就是用 overflow: scroll; 啊!嗯嗯,又不是不能用!如果我不曾见过太阳,我本可以忍受黑暗. 大家总会见过不少滚动条比较优雅的实现,不可否认,美是让人愉悦的.所以这些年行走江湖我满怀愧疚,让大家见丑了. 为什么要用el-scrollbar,大家都知道,模拟一个滚动不难,而且市面上有很多这样的库.我考虑的,首先项目用的框架是Vue,然
-
vue.js2.0 实现better-scroll的滚动效果实例详解
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. <template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWr
-
详解 vue better-scroll滚动插件排坑
BetterScroll号称目前最好用的移动端滚动插件,因此它的强大之处肯定是存在的.要不...哈哈.个人感觉还是很好用的.这篇文章不是笼统的讲 BetterScroll ,而是单讲滚动,想要深入了解它,请移步这里. 滚动原理 better-scroll 是什么滚动原理 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 featur
-
vue 框架下自定义滚动条(easyscroll)实现方法
增加一个自定义滚动条插件: //插件采用jsx语法,使用前需要安装vue-jsx插件 npm install babel-plugin-syntax-jsx --save-dev npm install babel-plugin-transform-vue-jsx --save-dev npm install babel-helper-vue-jsx-merge-props --save-dev npm install babel-preset-es2015 --save-dev //更改.ba
-
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否
-
vue滚动轴插件better-scroll使用详解
跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用: 一.项目中下载,并引入 在配置文件package.json中引入版本 "dependencies": { "better-scroll": "^0.1.7" } 然后进入项目目录,打开cmd更新配置 npm i (i是install缩写) 最后引入,比如我
-
vue scroller返回页面记住滚动位置的实例代码
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> <rout
-
vue better scroll 无法滚动的解决方法
使用vue+better scroll 今天实现切换用户后查询用户订单列表的一个功能,在实例化betterscroll时,因为有的用户没有订单,切换用户后会出现订单列表无法滚动的问题.先放代码: <!-- 订单列表 --> <div id="order-list" ref="scrollWrap"> <ul v-if="orderLists.length > 0"> <li v-for="
-
详解无限滚动插件vue-infinite-scroll源码解析
最近在项目中遇到一个需求,有一个列表需要滚动加载,类似于微博的无限滚动.当时第一反应时监听滚动事件,在判断滚动到达底部时加载下一页,同时心里也清楚,监听滚动事件需要做好截流.顺手搜索了下发现有一个现成的插件vue-infinite-scroll,用法也很简单,于是乎就用了起来. 需求上线后,对它的实现挺好奇的,于是研究了一番源码,这篇文章就是源码解析笔记. 插件使用方法 这是一个 vue 的指令,按照 github 仓库上的介绍,用法挺简单的,例如: <div class="app&quo
-
vue中实现移动端的scroll滚动方法
一.首先安装安装 npm install better-scroll --save 二. 并在组件中引用 import BScroll from 'better-scroll' template中引用指向将要滚动的DOM元素 根据官方文档ref属性的说明,我们可以这样将DOM元素引用 三. 在methods中注册_initScroll方法,这个方法是对better-scroll的实例化,并且这个方法将来会在页面DOM结构渲染后被执行 methods: { _initScroll(){ this.
-
vue的无缝滚动组件vue-seamless-scroll实例
Installation NPM npm install vue-seamless-scroll --save Usage ES6 以下es6用法需要webpack环境编译. <template> <div id="app"> <div class="fixed top-0 w-100 z-1 flex-none flex flex-row items-center pv3 ph4 bg-blue white"> <div
-
vue利用better-scroll实现轮播图与页面滚动详解
前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码
随机推荐
- js实现点击获取验证码倒计时效果
- js+CSS实现模拟华丽的select控件下拉菜单效果
- Python简单实现TCP包发送十六进制数据的方法
- ASP.NET mvc异常处理的方法示例介绍
- 增强的 JavaScript 的 trim 函数的代码
- DataList绑定到Row[]行集合的问题的方法
- php中字符串和正则表达式详解
- python实现的防DDoS脚本
- JSP 开发之Spring Security详解
- VC++实现输出GIF到窗体并显示GIF动画的方法
- 如何解决在jsp页面上导入.xls文件报错问题
- 浅析Ruby中的类对象的概念
- PowerShell比较文本文件的两个方法
- 基于Jquery的将DropDownlist的选中值赋给label的实现代码
- 微信小程序 swiper制作tab切换实现附源码
- PHP filter_var() 函数 Filter 函数
- vue+jquery+lodash实现滑动时顶部悬浮固定效果
- python实现两个经纬度点之间的距离和方位角的方法
- pip指定python位置安装软件包的方法
- php异常处理捕获错误整理