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

charles_paul 发布于2019-08-29 14:14 / 848人阅读

摘要：在商品列表生命周期中，监听当前父元素的滚动事件，滚动时的回调中，获取到滚动条距离滚动元素即的距离的值，存入到以及在中移除掉当前滚动事件的监听。

-webkit-overflow-scrolling介绍

-webkit-overflow-scrolling: auto  |  touch;

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

兼容写法

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

如何使用

上代码：

.scrollContainer{
    width: 100px;
    height: 50px;   
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;       
    overflow-x: hidden;    
}
.scrollContainer>ul>li{
    height: 20px;
    width: 100%;
}

可能会出现的bug

父级元素scrollContainer加上定位position: absolute|relative，滑动几次后可滚动区域会卡主，不能在滑动

快速滑动页面会出现空白，滑动停止后内容才显示

此时，你应该给父级元素scrollContainer加上如下代码：

//解决第一个bug
z-index:1;    

//解决第二个bug
-webkit-backface-visibility: hidden;    
-webkit-transform: translate3d(0,0,0);

需求

在vue项目中，我们可能会遇到这样的需求，例如：

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

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

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

思路

商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面，这样，在详情页面返回的时候，页面不至于重新加载。

在商品列表生命周期activated中，监听当前scrollContainer父元素的滚动事件，滚动时的回调中，获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值，存入到以及在deactivated中移除掉当前滚动事件的监听。

在商品列表中，点击进入详情页中的时候，将滚动条位置被缓存下来了，你可以放到sessionStorage|localStorage中。当然，如果你使用了vuex，可以直接将值放入vuex中进行管理；

从详情页中返回的时候，同时要做这样的操作，将你存入缓存中的scrollTop值重新赋予给当前div的滚动条

Ok，思路就是这样子，大功告成。

vue中具体实现

我是用的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事件
}

后话

如果有更好的办法，互相交流。

云服务器 GPU云服务器 js?移动端滑动位置滑动控件显示 android弹性滑动 js上下滑动弹性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113011.html

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

摘要：在商品列表生命周期中，监听当前父元素的滚动事件，滚动时的回调中，获取到滚动条距离滚动元素即的距离的值，存入到以及在中移除掉当前滚动事件的监听。 -webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto：普通滚动，当手指从触摸屏上移开，滚动立即停止touch：滚动回弹效果，当手指从触摸屏上...

wuyangnju 2019-08-22 13:50 评论0 收藏0
移动端VUE点击、滑动和长按等事件处理（自定义指令）

摘要：问题移动设备上的触摸事件如何利用它们三个来处理点击长按滑动等操作，以及如何在测试用例中模拟它们的操作参考了实现方法上这位大哥的思路移动设备的点击优化参考了感谢解决使用自定义指令来干这件事来记录开始点击的位置和时间，并在这里边判断长按操作来确问题：移动设备上的触摸事件：touchstart、touchmove、touchend如何利用它们三个来处理点击、长按、滑动等操作，以及如何在测...

niuxiaowei111 2019-08-22 15:38 评论0 收藏0
vue移动端侧滑面板组件

摘要：里边涉及到的指令是自定义的指令，为了处理移动端的点击操作，我还整理了一片陋文移动点击长按滑动指令然后这个组件的源码我放在了我出来的项目上谢谢各位品尝，以下这段都是废话，请跳过公司移动端开发平台进行了大变革，前端架构由DCloud大生态转换为VUE，所以移动端的UI组件库从MUI改为使用MintUI，然后开始大刀阔斧的把MintUI组件改成MUI组件的样子，然后发现少了几个较为常用的...

TNFE 2019-08-22 16:21 评论0 收藏0
Vue全家桶商城全站升级之引入HTTPS,PWA,错误监控,持续构建。

摘要：免费升级到升级到后，服务器可以开启版本，对比性能和缓存各方面要更好，还有其他新特性，可以启动功能，更好的进行离线缓存，更好的离线体验。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在线地址:https://fancy.czero.cn 手机扫描二维码查看: showImg(http...

zengdongbao 2019-08-23 10:22 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

wqj97 2019-08-21 17:38 评论0 收藏0