移动端弹性滑动以及vue记录滑动位置-阿里云开发者社区

开发者社区> 云原生> 正文

移动端弹性滑动以及vue记录滑动位置

简介: 移动端用下拉刷新的方式实现上拉加载 移动端(手机端)页面自适应解决方案—rem布局篇 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端) 移动端rem.

-webkit-overflow-scrolling介绍

``` -webkit-overflow-scrolling: auto | touch; ``` auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

兼容写法

``` over-flow: auto; /* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */ ```

如何使用

上代码: ```
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
``` ``` .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);



<h2>需求</h2>
在vue项目中,我们可能会遇到这样的需求,例如:

商品列表页中,点击某一商品,进入到详情页。

从详情页中返回到商品列表页,页面应当显示的页面应当是之前的样子。

也就是说,滚动条的位置应该缓存下来;

<h2>思路</h2>
&nbsp;&nbsp;&nbsp;&nbsp;1.商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面,这样,在详情页面返回的时候,页面不至于重新加载。
&nbsp;&nbsp;&nbsp;&nbsp;2.在商品列表生命周期activated中,监听当前scrollContainer父元素的滚动事件,滚动时的回调中,获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值,存入到以及在deactivated中移除掉当前滚动事件的监听。
&nbsp;&nbsp;&nbsp;&nbsp;3.在商品列表中,点击进入详情页中的时候,将滚动条位置被缓存下来了,你可以放到sessionStorage|localStorage中。当然,如果你使用了vuex,可以直接将值放入vuex中进行管理;
&nbsp;&nbsp;&nbsp;&nbsp;4.从详情页中返回的时候,同时要做这样的操作,将你存入缓存中的scrollTop值重新赋予给当前div的滚动条
&nbsp;&nbsp;&nbsp;&nbsp;5.Ok,思路就是这样子,大功告成。


<h2>vue中具体实现</h2>
我是用的vuex进行管理的滚动条位置,实现代码如下:
//加了一个ref,用于获取当前dom
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
``` ``` 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

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章