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

组件全部代码

@import "../../assets/stylus/mixin.styl"
.goods

position absolute
top 3.6rem
bottom .92rem
display flex
width: 100%
overflow: hidden
.menu-wrapper
  flex 0 0 1.6rem
  width 1.6rem
  background-color #f3f5f7
  .menu-item
    height 1.08rem
    display flex
    align-items center
    justify-content left
    &.border-bottom::before
color rgba(7,17,27,.1)
    .text
      font-weight 200
      font-size .24rem
      line-height .28rem
      margin 0 .24rem
      .text-ico
  margin-right -.08rem
  vertical-align top;
    &.current
      font-size .24rem
      line-height .28rem
      color rgb(240,20,20)
      background-color #ffffff
.foods-wrapper
  flex 1
  .food-list
    h1
      width 100%
      height .52rem
      line-height .52rem
      padding-left .28rem
      background-color #f3f5f7
      font-size .24rem
      color rgb(147,153,159)
      &.border-left::before
 border-color #d9dde1
 border-width .1rem


    .food-item
      display flex
      padding .36rem
      &:last-child.border-bottom
 border none
      .food-desc
 margin-left .2rem
 font-size .2rem
 color rgb(147,153,159)
 .title
   font-size:.28rem
   color rgb(7,17,27)
   margin-top .04rem
   line-height .28rem
 .desc
   margin .15rem auto
   line-height:.28rem
 .num
   display flex
   margin 0 0 .16rem 0
   .sellCount
      margin-right .24rem

 .price
   display flex
   align-items center
   .new-price
     color rgb(220,20,60)
     font-weight 700
     line-height .48rem
     margin-right .16rem
     font-size .28rem

   .old-price
     &.border-bottom::before
position absolute
top: 25%;
border-width: 0.08rem;

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(); //这个方法为了获取每个商品类的最大区间的高度
    })

获取每个右侧区域的

     let height = 0;
     let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');
     this.listHeight.push(height); //listHeight这个数组是用来存放右侧商品中每个类型商品的最大区间高度的集合
     for(var i=0;i

foodLsit表示所有li【 
】dom集合；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。