Vue项目中使用better-scroll实现菜单映射功能方法

<template>

<div class="goods">
  <!--左侧区域-->
  <div class="menu-wrapper" ref="left">
    <ul class="menu">
      <li class="menu-item border-bottom"
        :class="{'current':currentIndex===index}"
        v-for="(item,index) in dataLlist.goods"
        :key="index"
        @click="selectIndex(index,$event)"
        ref="menuList"
      >
        <div class="text">
          <goods-icon v-show="item.type>0" :index="item.type" class="text-ico"></goods-icon>
          {{item.name}}
        </div>
      </li>
    </ul>
  </div>
  <!--右侧区域-->
  <div class="foods-wrapper" ref="right">
    <ul>
      <li class="food-list food-list-hook"
        v-for="(item,index) in dataLlist.goods"
        :key="index">
        <!--标题区域-->
        <h1 class="border-left">{{item.name}}</h1>
        <ul>
          <li class="food-item border-bottom"
            v-for="(foodItem,index) in item.foods"
          >
            <div class="food-image">
              <img :src="/UploadFiles/2021-04-02/foodItem.icon">

Vue项目中使用better-scroll实现菜单滑动功能


安装和在组件中引入better-scroll




npm install better-scroll --save



引入import BScroll from 'better-scroll' 【在组件中引入，在后续的export default中就可以直接使用封装好的better-scroll功能了】
better-scroll实现的下面功能


在菜单中要实现点击左侧菜单的食品类型名称，右侧就会自动滑动到此食品类型下的所有食品；在右侧区域中滑动到食品类型下的所有食品区域下的时候，左侧菜单会出现相应的高亮效果
如何实现上面的功能：
第一：需要知道要在哪些区域间实现滑动

第二：通过new BScroll（）获取要实现滑动的区域


this.meunScroll=new BScroll(this.$refs.left);
this.foodScroll=new BScroll(this.$refs.right);



第三：上面代码在理论上应该在相应的区域都应该能滑动了，但是现实是并不能滑动
原因是：数据的获取是异步获取的，在定义滑动区域的时候，也许数据还没有更新，这是this.meunScroll的高度可能就没有高度外部类goods的高度，这样就不会滑动。


解决的方法：this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行，使用$nextTick异步初始化Bscroll


 this.$nextTick(()=>{ //this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行，使用$nextTick异步初始化Bscroll
      this.meunScroll=new BScroll(this.$refs.left,{
        click:true //左侧菜单可以进行点击事件
      });
      this.foodScroll=new BScroll(this.$refs.right,{
        probeType: 3 //可以派发scroll事件，检测到实时滚动的位置
      });
      【this.foodScroll中必须有 probeType: 3后才能进行下面的scroll事件】
      this.foodScroll.on('scroll',(pos) =>{
        //参数pos就是在右侧区域滑动的实时位置
        //Math.round()取整数,Math.abs取绝对值
        this.scrollY =Math.abs( Math.round(pos.y));
      });
      this._calculateHeight(); //这个方法为了获取每个商品类的最大区间的高度
    })



获取每个右侧区域的 <li class="food-list food-list-hook">的高度


在data中定义一个空listHeight数组；数组中的元素代表了每个li到this.foodScroll最顶部的区域高度；
_calculateHeight(){ //这个方法为了获取每个商品类的最大区间的高度


     let height = 0;
     let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');
     this.listHeight.push(height); //listHeight这个数组是用来存放右侧商品中每个类型商品的最大区间高度的集合
     for(var i=0;i<foodLsit.length;i++){
       let item = foodLsit[i];
       //clientHeight代表元素的高度
       height += item.clientHeight; //每个元素的高度等于自身高度加上上一个元素的高度
       this.listHeight.push(height); //最终listHeight集合了所有li[类为food-list-hook]到最顶部的高度
     }
    },
let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');




foodLsit表示所有li【 <li class="food-list food-list-hook">】dom集合；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。