better-scroll实现滚动

通过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就可以实现滑动快速入口，组件也会跟着动的效果

 

 

欢迎交流，小白一枚！