溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能方法

發(fā)布時(shí)間：2020-10-05 07:51:51 來(lái)源：腳本之家 閱讀：168 作者：素素 欄目：web開(kāi)發(fā)

組件全部代碼

<template>

<div class="goods">
  <!--左側(cè)區(qū)域-->
  <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>
  <!--右側(cè)區(qū)域-->
  <div class="foods-wrapper" ref="right">
    <ul>
      <li class="food-list food-list-hook"
        v-for="(item,index) in dataLlist.goods"
        :key="index">
        <!--標(biāo)題區(qū)域-->
        <h2 class="border-left">{{item.name}}</h2>
        <ul>
          <li class="food-item border-bottom"
            v-for="(foodItem,index) in item.foods"
          >
            <div class="food-image">
              <img :src="foodItem.icon" alt="foodItem.name">
            </div>
            <div class="food-desc">
              <div class="title">{{foodItem.name}}</div>
              <div class="desc">{{foodItem.description}}</div>
              <div class="num">
                <div class="sellCount">月售{{foodItem.sellCount}}份</div>
                <div class="rating">好評(píng)率{{foodItem.rating}}%</div>
              </div>
              <div class="price">
                <div class="new-price">￥{{foodItem.price}}</div>
                <div class="old-price border-bottom" v-show="foodItem.oldPrice">￥{{foodItem.oldPrice}}</div>
              </div>
            </div>

          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</template>

<script>

import Icon from '../../common/iconType/Icon';
import BScroll from 'better-scroll'

export default {
  name: "Goods",
  props:['dataLlist'],
  data(){
    return{
      listHeight:[],
      scrollY:0 ,//為了實(shí)現(xiàn)左右區(qū)域映射
    }
  },
  computed:{
    currentIndex(){ //這個(gè)返回的是下標(biāo)，當(dāng)這個(gè)currentIndex的值與goods的下標(biāo)一致的時(shí)候，
      // 左側(cè)區(qū)域就會(huì)呈現(xiàn)高亮現(xiàn)象
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          this._followScroll(i) //實(shí)現(xiàn)當(dāng)滑動(dòng)的時(shí)候，左側(cè)隱藏的食物類(lèi)型顯示
          return i;
        }
      }
      return 0;
    }
  },
  created(){
    //dataLlist數(shù)據(jù)是異步加載，直接用new BScroll時(shí)，dom可能還沒(méi)有更新
    this.$nextTick(()=>{ //this.$nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行，使用$nextTick異步初始化Bscroll
      this.meunScroll=new BScroll(this.$refs.left,{
        click:true
      });
      this.foodScroll=new BScroll(this.$refs.right,{
        probeType: 3 //可以派發(fā)scroll事件，檢測(cè)到實(shí)時(shí)滾動(dòng)的位置
      });
      this.foodScroll.on('scroll',(pos) =>{
        //參數(shù)pos就是在右側(cè)區(qū)域滑動(dòng)的實(shí)時(shí)位置
        //Math.round()取整數(shù),Math.abs取絕對(duì)值
        this.scrollY =Math.abs( Math.round(pos.y));
      });
      this._calculateHeight(); //這個(gè)方法為了獲取每個(gè)商品類(lèi)的最大區(qū)間的高度
    })
  },
  methods:{
    _followScroll(index) {
      if(index > 0 ){
        let menuList = this.$refs.menuList;
        let el = menuList[index];
        this.meunScroll.scrollToElement(el, 300, 0, -100);//better-scroll的scrollToElement方法滾動(dòng)到指定位置
      }
      },
    _calculateHeight(){ //這個(gè)方法為了獲取每個(gè)商品類(lèi)的最大區(qū)間的高度
     let height = 0;
     let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');
     this.listHeight.push(height); //listHeight這個(gè)數(shù)組是用來(lái)存放右側(cè)商品中每個(gè)類(lèi)型商品的最大區(qū)間高度的集合
     for(var i=0;i<foodLsit.length;i++){
       let item = foodLsit[i];
       //clientHeight代表元素的高度
       height += item.clientHeight; //每個(gè)元素的高度等于自身高度加上上一個(gè)元素的高度
       this.listHeight.push(height); //最終listHeight集合了所有l(wèi)i[類(lèi)為food-list-hook]到最頂部的高度
     }
    },
    selectIndex(index,ele){
      //better-scroll 會(huì)禁止移動(dòng)端的點(diǎn)擊事件，需要重新派發(fā)，同時(shí)在PC端會(huì)點(diǎn)擊兩次，此處需要做判斷
      if(!ele._constructed){
        //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點(diǎn)擊事件的event有個(gè)
        // 屬性區(qū)別_constructed，pc端瀏覽器的點(diǎn)擊事件的event中是沒(méi)有這個(gè)屬性的
        return;
      }
      let rightItem =this.$refs.right.getElementsByClassName('food-list-hook');
      let item = rightItem[index]; //找到相應(yīng)的li
      this.foodScroll.scrollToElement(item, 250) //better-scroll的scrollToElement方法滾動(dòng)到指定位置
    }
   // scrollToElement(el, time, offsetX, offsetY, easing) //第一個(gè)值接收目標(biāo)元素，第二個(gè)是滾動(dòng)時(shí)間，第三第四個(gè)是相對(duì)于目標(biāo)元素的偏移量。
},

  components:{
    'goods-icon': Icon
  }

}
</script>

<style scoped lang="stylus">

@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
    h2
      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;

</style>

Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單滑動(dòng)功能

安裝和在組件中引入better-scroll

npm install better-scroll --save

引入import BScroll from 'better-scroll' 【在組件中引入，在后續(xù)的export default中就可以直接使用封裝好的better-scroll功能了】

better-scroll實(shí)現(xiàn)的下面功能

在菜單中要實(shí)現(xiàn)點(diǎn)擊左側(cè)菜單的食品類(lèi)型名稱(chēng)，右側(cè)就會(huì)自動(dòng)滑動(dòng)到此食品類(lèi)型下的所有食品；在右側(cè)區(qū)域中滑動(dòng)到食品類(lèi)型下的所有食品區(qū)域下的時(shí)候，左側(cè)菜單會(huì)出現(xiàn)相應(yīng)的高亮效果

如何實(shí)現(xiàn)上面的功能：

第一：需要知道要在哪些區(qū)域間實(shí)現(xiàn)滑動(dòng)

Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能方法

第二：通過(guò)new BScroll（）獲取要實(shí)現(xiàn)滑動(dòng)的區(qū)域

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

第三：上面代碼在理論上應(yīng)該在相應(yīng)的區(qū)域都應(yīng)該能滑動(dòng)了，但是現(xiàn)實(shí)是并不能滑動(dòng)

原因是：數(shù)據(jù)的獲取是異步獲取的，在定義滑動(dòng)區(qū)域的時(shí)候，也許數(shù)據(jù)還沒(méi)有更新，這是this.meunScroll的高度可能就沒(méi)有高度外部類(lèi)goods的高度，這樣就不會(huì)滑動(dòng)。

解決的方法：this.$nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行，使用$nextTick異步初始化Bscroll

 this.$nextTick(()=>{ //this.$nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行，使用$nextTick異步初始化Bscroll
      this.meunScroll=new BScroll(this.$refs.left,{
        click:true //左側(cè)菜單可以進(jìn)行點(diǎn)擊事件
      });
      this.foodScroll=new BScroll(this.$refs.right,{
        probeType: 3 //可以派發(fā)scroll事件，檢測(cè)到實(shí)時(shí)滾動(dòng)的位置
      });
      【this.foodScroll中必須有 probeType: 3后才能進(jìn)行下面的scroll事件】
      this.foodScroll.on('scroll',(pos) =>{
        //參數(shù)pos就是在右側(cè)區(qū)域滑動(dòng)的實(shí)時(shí)位置
        //Math.round()取整數(shù),Math.abs取絕對(duì)值
        this.scrollY =Math.abs( Math.round(pos.y));
      });
      this._calculateHeight(); //這個(gè)方法為了獲取每個(gè)商品類(lèi)的最大區(qū)間的高度
    })

獲取每個(gè)右側(cè)區(qū)域的 <li class="food-list food-list-hook">的高度

在data中定義一個(gè)空l(shuí)istHeight數(shù)組；數(shù)組中的元素代表了每個(gè)li到this.foodScroll最頂部的區(qū)域高度；

_calculateHeight(){ //這個(gè)方法為了獲取每個(gè)商品類(lèi)的最大區(qū)間的高度

     let height = 0;
     let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');
     this.listHeight.push(height); //listHeight這個(gè)數(shù)組是用來(lái)存放右側(cè)商品中每個(gè)類(lèi)型商品的最大區(qū)間高度的集合
     for(var i=0;i<foodLsit.length;i++){
       let item = foodLsit[i];
       //clientHeight代表元素的高度
       height += item.clientHeight; //每個(gè)元素的高度等于自身高度加上上一個(gè)元素的高度
       this.listHeight.push(height); //最終listHeight集合了所有l(wèi)i[類(lèi)為food-list-hook]到最頂部的高度
     }
    },
let foodLsit = this.$refs.right.getElementsByClassName('food-list-hook');

foodLsit表示所有l(wèi)i【 <li class="food-list food-list-hook">】dom集合；

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手