zoukankan      html  css  js  c++  java
  • betterscroll实现滚动

    通过better-scroll这个插件实现微信好友滚动列表

    安装better-scroll

    npm i better-scroll

    初始化better-scroll
      //better-scroll需要一个div,类名wrapper
      //wrapper下放滚动元素,content,只有wrapper下的第一个元素能够滚动,其他无效,所以其他元素内容都放在content中
     
    使用前先引入better-scroll
      let wrapper =  document.querySelector(".wrapper");
      //初始化better-scroll,挂载到组件实例里,方便使用
      //注意:初始化better-scroll时最好在获取数据之后,this.$nextTick(() => {})中执行,否则可能出现无法滚动。 
      this.$scroll = new BScroll(".wrapper");
     
    滚动与快速入口

    实现一:点击快速入口,组件滚动到指定位置,如点击A,跳转到A的歌手中

    首先,需要获取到一个数组  AZList = ["热门","A","B"......"Z"],可通过数据生成也可以写假数据

    再获取每一个tab栏,例如 热门这一栏,距离窗口顶部的距离

    获取方法:通过ref给每一个tab栏绑定,遍历this.$refs,创建一个数组存放数据,如clientData.push( this.$refs.offsetTop )  (这个用法不标准,自行查看如何再refs上获取offsetTop)

    先根据数组生成快速入口。

    点击快速入口时,获取该快速入口在数组中为索引值,如A,索引值为1

    此时添加一个方法

    scroll(index){  //接收一个index , 为 点击快速入口时 获取到的索引值

      //clientData存放的是每一个tab栏距离窗口的距离,比如说是热门距离窗口的距离

      this.$scroll是挂载到组件实例的对象,上面有提到,scrollTo是better-scroll提供的方法,可自行查阅,400是动画时间

      this.$scroll.scrollTo(0,-clientData[index],400)

    }

    到这就可以实现点击快速入口滚动

    实现二:滑动快速入口与组件联动

    @touchstart="touchStart"  //手指按下
    @touchmove="touchMove"//手指滑动
    @touchend = "touchEnd" //手指抬起
    1、手指点击touchstart时,通过事件对象e获取到点击的元素
    2、事件对象e中有一个属性为touches,touches里面有一个clientY,距离窗口顶部的距离
    实现思路:
    1、假设 热门 距离窗口顶部的距离为180
    2、我们现在点击了快速入口的A,通过事件对象获取到了 A 距离窗口 顶部 的距离 x,那么 A 到 热门 的距离 就等于 length = x - 180
    3、每一个快速入口之间的距离 为 20px
    4、通过 length / 20 就可以获取到 我们滑动到了哪个位置
    5、根据clientData 和 第四步获取到的索引值, 可以获取到滚动距离
    5、通过scrollTo就可以实现滑动快速入口,组件也会跟着动的效果

    欢迎交流,小白一枚!

  • 相关阅读:
    layui 3种导航栏
    SQL语句内做除法得出百分比
    JS 日期比较方法
    JDK 13 的 12 个新特性,真心涨姿势了
    怎么实现单点登录?面试必问!
    厉害了,Apache架构师们遵循的 30 条设计原则
    面试官问线程安全的List,看完再也不怕了!
    Java 类在 Tomcat 中是如何加载的?
    Redis 21问,你接得住不?
    String hashCode 这个数字,很多人不知道!
  • 原文地址:https://www.cnblogs.com/vnwith/p/12528351.html
Copyright © 2011-2022 走看看