文档章节

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

o
 osc_odyg6b92
发布于 2018/07/13 13:29
字数 800
阅读 14
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

-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

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
6.1K
18
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
集群存储系统--YFS

YFS集群存储系统由多个元数据服务器(MDS)、多个块数据服务器(CDS)和多个客户端(client)互联组成集群; 数据被分成64M固定大小的数据块(Chunk),每个数据块在CDS本地以常规文件的形式...

匿名
2013/02/19
1.8K
0
C++ 软件生态系统--Ryppl

Ryppl 是由 Boost 项目的一些成员创建的项目,因为意识到 Boost 越来越耦合、笨拙以及依赖于定制的架构。因此他们决定开始 Ryppl 项目。 Ryppl 项目的目的就是创建一个可移植的模块化的 C++ ...

匿名
2013/03/06
1.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSPF综合实验

OSPF开放路径最短选择优先协议(IGP协议、链路状态协议) 支持大型网络,通过彼此交互hello建立邻居关系,在通过彼此交互的LSA通过SPF算法算出最优路由的到自己去往其他节点路径。 OSPF的DR、...

osc_qmxpov5s
8分钟前
0
0
vmlogin多平台·多账号·安全提速系统·稳定浏览器指纹环境

VMLogin-稳定浏览器指纹环境,Cookie隔离,稳定,更高效,更智能的多账号管,从超级浏览器开始,让你的跨境之旅更便捷! VMLogin生成多个唯一指纹浏览器,每个指纹浏览器都是相互隔离的。 可以...

VMlogin中文版防关联浏览器
8分钟前
0
0
Buurst SoftNAS操作手册—Part1 如何在AWS上部署SoftNAS

前言 Buurst SoftNAS为企业提供高性能、易管理、高可用、极具经济效益的存储服务,无论是在私有云还是公有云环境下均可实现一键部署。Buurst SoftNAS可为企业提供软件定义NAS文件管理器并提供...

osc_cyo5y1ey
9分钟前
0
0
《闲扯Redis十》Redis 跳跃表的结构实现

一、前言 Redis 提供了5种数据类型:String(字符串)、Hash(哈希)、List(列表)、Set(集合)、Zset(有序集合),理解每种数据类型的特点对于redis的开发和运维非常重要。 原文解析:h...

大道七哥
10分钟前
0
0
BGP综合实验

BGP边界网关协议 BGP是目前使用的唯一的自治系统间的路由协议,它是一种矢量路由协议,基于TCP的179号端口,它采用单播增量更新的方式更新路由,与其他的路由协议不同的是,BGP只要TCP可达,...

osc_tybx1rlt
10分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部