vue.js2.0 实现better-scroll的滚动效果实例详解

<template>
  <div>
    <div class="goods">
      <div class="menu-wrapper" ref="menuWrapper">
      </div>
      <div class="food-wrapper" ref="foodWrapper">
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from "better-scroll";
  export default {
    data(){
  return {
  currentIndex:1,
  goods:[]
  }  
 },
 created(){
  this.classMap=['decrease','discount','special','invoice','guarantee'];
  this.$http.get('/api/goods').then((response)=>{
  response=response.body;
  if (response.errno===ERR_OK) {
   this.goods=response.data;
  }
        //dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
  this.$nextTick(()=>{
   this._initScroll();
  });
  });
 },
 methods:{
  _initScroll(){
        // 使用better-scroll实现的关键代码
  this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true});
  this.foodScroll=new BScroll(this.$refs.foodWrapper,{click:true});
  }
 }
  };
</script>

 computed:{
  //用来计算左侧当前索引在哪，从而定位到左侧边栏的位置
  currentIndex(){
  for (let i = 0; i < this.listHeight.length; i++) {
   var height1=this.listHeight[i] ;
   var height2=this.listHeight[i+1];
   if(!height2||(this.scrollY >= height1 && this.scrollY < height2)){
   return i;
   }
  }
  return 0;
  }
 },
 methods:{
  _initScroll(){
  // 使用better-scroll实现的关键代码
  this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true});
  this.foodScroll=new BScroll(this.$refs.foodWrapper,{
   click: true,
          //探针作用，实时监测滚动位置
          probeType: 3
  });
  this.foodScroll.on('scroll',(pos)=>{
   this.scrollY=Math.abs(Math.round(pos.y))
  });
  },
  _calculateHeight(){
  let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
  let height=0;
  this.listHeight.push(height);
  for (var i = 0; i < foodList.length; i++) {
   let item=foodList[i];
   height+=item.clientHeight;
   this.listHeight.push(height);
  }
  }
 }
//dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
         this.$nextTick(()=>{
           this._initScroll();
           this._calculateHeight();
         });

/左边的菜单项的点击事件
selectMenu(index,event){
//自己默认派发事件时(BScroll),_constructed默认为true.但原生的浏览器并没有这个属性
 if (!event._constructed) {
   return;
 }
 //运用BScroll滚动到相应位置
 //运用index去找到对应的右侧位置
 let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
 //滚动到相应的位置
 let el=foodList[index];
 //设置滚动时间
 this.foodScroll.scrollToElement(el,2000);
}

<template>
 <div>
 <div class="goods">
  <div class="menu-wrapper" ref="menuWrapper">
  <ul>
   <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
   <span class="text border-1px">
    <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
   </span>
   </li>
  </ul>
  </div>
  <div class="food-wrapper" ref="foodWrapper">
  <ul>
   <li v-for="(item,index) in goods" class="food-list food-list-hook">
   <h1 class="title">{{item.name}}</h1>
   <ul>
    <li v-for="food in item.foods" class="food-item border-1px">
    <div class="icon">
     <img :src="/UploadFiles/2021-04-02/food.icon">




总结
以上所述是小编给大家介绍的vue.js2.0 实现better-scroll的滚动效果实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！