vue利用better-scroll实现通讯录式列表滚动和左右联动效果

文章目录

前言

大家好，我是尤雨海。。。。。。。

效果演示

一、HTML部分。

<template><div><!--使用better-scroll的父容器  必须设置固定宽高--><div class="wrapper" ref="wrapper"><div class="city"><ul v-for="(item, index) in cityList":key="index":ref="index"><p>{{ index }}</p><li v-for="(items, indexs) in item":key="indexs">{{ items.name }}</li></ul></div></div><!-- 右侧字母列表 --><ul class="letterList"><li
        v-for="(item, index) in letter":key="index"
        @click="scrollToEle(item)":class="{ active: item == isLetter }"
        @touchmove="handleMove":ref="item">{{ item }}</li></ul></div></template>

二、css部分

<style lang="scss" scoped>.wrapper {
  width:100%;
  height:100vh;
  overflow: hidden;.city {
    width:100%;
    ul {
      width:100%;
      p {
        background-color: #ccc;
        padding:5px;}
      li {
        width:100%;
        padding:5px;
        border:1px solid #ccc;}}}}.letterList {
  position: fixed;
  right:0;
  top:0;
  height:100vh;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  li {
    margin:3px 0;}}.active {
  color: aqua;}</style>

三、js部分

<script>//引入better-scroll插件import BScroll from"better-scroll";exportdefault{
  name:"City",data(){return{/* 城市数据 */
      cityList:[],/* 右侧字母数据 */
      letter:[],/* 右侧字母列表的被选中项 */
      isLetter:null,/* 存放顶部到每一段节点距离的数据,因为初始阶段是0，所以将第一项设置为0 */
      distanceArr:[0],/* 根据左侧滚动高度查找的右侧字母列表对应的下标 */
      nodeIndex:0,};},created(){this.getCityList();},mounted(){/*初始化better-scroll */
    console.log(this.$refs.wrapper);let wrapper = document.querySelector(".wrapper");this.bs =newBScroll(wrapper,{/* 配置纵向滚动 */
      scrollY:true,/* 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。 */
      probeType:3,});/* 监听scroll的滚动事件 */this.bs.on("scroll",this.ListenerScroll);},
  methods:{//获取城市数据getCityList(){this.$axios.get("city.json").then((res)=>{this.cityList = res.data.data.cities;this.letter = Object.keys(res.data.data.cities);/* 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。 */this.$nextTick(()=>{this.bs.refresh();});});},/* 点击右侧字母，左侧列表跳转到指定位置 */scrollToEle(item){/* 调用better-scroll的scrollToElement方法 */this.bs.scrollToElement(this.$refs[item][0]);this.isLetter = item;},/* 监听页面滚动事件 */ListenerScroll(position){//将滚动距离顶部的距离转换为正数let scrollTop = Math.abs(position.y);/* 获取每一段城市的节点，并做进一步的处理 */let cityNode = Object.values(this.$refs);/* 获取顶部到每一段节点的距离 */let top =0;let distanceArr =[0];
      cityNode.forEach((item, index)=>{//因为数组的第一项是最外层的父级节点，所有从第二项开始遍历if(index >0){
          top += item[0].clientHeight;
          distanceArr.push(top);}});this.distanceArr = distanceArr;/* 根据高度查找对应的index */this.nodeIndex =this.distanceArr.findIndex((item, index)=>{return scrollTop >= item && scrollTop <this.distanceArr[index +1];});/* 根据下标找出右侧对应的节点 */this.isLetter =this.letter[this.nodeIndex];},/* 监听在右侧字母列表的滑动事件 */handleMove(e){/* 为节省性能，此处使用了节流 */if(this.timeout){return;}else{this.timeout =setTimeout(()=>{/* 获取右侧A到顶部的距离 */let offTop =this.$refs["A"][1].offsetTop;/* 获取鼠标滑动点到顶部的距离 */let clientY = e.touches[0].clientY;/* 获取A点到鼠标滑动点的距离 */let nodeY = clientY - offTop;/* 根据相差的距离计算当前所处位置的下标 */let index = Math.floor(nodeY /18.39);//18.39是每个节点的高度;if(index >=0&& index <this.letter.length){/* 根据下标得出当前的节点 */let node =this.letter[index];/* 调用better-scroll的scrollToElement方法 进行跳转*/this.bs.scrollToElement(this.$refs[node][0]);}this.timeout =null;},200);}},},
  components:{},};</script>