移动端弹性滑动以及vue记录滑动位置
2018-01-17 22:10
369 查看
-webkit-overflow-scrolling介绍
-webkit-overflow-scrolling: auto | touch;
auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止
touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
兼容写法
over-flow: auto; /* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */
如何使用
上代码:<div class="scrollContainer"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div>
.scrollContainer{ width: 100px; height: 50px; -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .scrollContainer>ul>li{ height: 20px; width: 100%; }
可能会出现的bug
1.父级元素scrollContainer加上定位position: absolute|relative,滑动几次后可滚动区域会卡主,不能在滑动2.快速滑动页面会出现空白,滑动停止后内容才显示
此时,你应该给父级元素scrollContainer加上如下代码:
//解决第一个bug z-index:1; //解决第二个bug -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);
需求
在vue项目中,我们可能会遇到这样的需求,例如:商品列表页中,点击某一商品,进入到详情页。
从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。
也就是说,滚动条的位置应该缓存下来;
思路
1.商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。2.在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。
3.在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;
4.从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条
5.Ok,思路就是这样子,大功告成。
vue中具体实现
我是用的vuex进行管理的滚动条位置,实现代码如下:<div class="scrollContainer" ref="scroll"> //加了一个ref,用于获取当前dom <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div>
computed:{ ...mapGetters([ "home_list_top" //vuex中的存放的滚动条的位置 ]) } ... methods:{ recordScrollPosition(e) { this.$store.dispatch("setHomeListTop",e.target.scrollTop); //实时存入到vuex中 } } ... activated(){ //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了 this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滚动的dom,即scrollContainer,this.home_list_top是存入到vuex里的值 this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加绑定事件 }, deactivated(){ //keep-alive 的页面跳转时,移除scroll事件 this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除绑定的scroll事件 }
后话
如果有更好的办法,互相交流。https://segmentfault.com/a/1190000012857661
相关文章推荐
- vue实现一个移动端屏蔽滑动的遮罩层
- 移动端滑动 增加弹性 滑动更加顺畅
- android ListView 精确记录滑动位置
- Android 记录ListView滚动的位置的三种方法及判断是否滑动到底部
- vue.js移动端app实战4:上拉加载以及下拉刷新
- sessionStorage、localStorage技术相关以及商家sid、sbid记录相关、vue相关问题
- vue 做移动端微信公众号采坑经验记录
- 原生JS实现移动端模块的左右滑动切换效果,基于vue、stylus
- vue-scroller记录滚动位置
- Android ListView记录上次滑动时位置状态
- vue-scroller记录滚动位置的示例代码
- Android学习记录(二十七)--ListView刷新记录滑动位置的实现。
- 中间部分滚动记录div内滚动条的位置, 以及将页面分为三部分组成解决position:fixed在ios下失效问题
- vue自定义移动端touch事件之点击、滑动、长按事件
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- Recyclerview中最后一个可见Item的位置以及是否滑动到底部
- js移动端滑动一个屏幕再加载新的数据以及ajax同步请求
- vue.js移动端app实战4:上拉加载以及下拉刷新
- Android ListView记录和恢复滑动位置
- Android ListView 记录滑动位置