vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)頁面的方法-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)成立于2013年，先為大通等服務(wù)建站，大通等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為大通企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

這篇文章主要介紹vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)頁面的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

界面如下：

vue模板

<template>
 <div class="goods">
 <div class="menu-wrapper">
  <ul>
  <li class="menu-item" v-for="(good, index) in goods" :key="index" 
   :class="{current: currentIndex===index}" @click="clickMenuItem(index)">
   <span class="text bottom-border-1px">
   <img :src="good.icon" class="icon" v-if="good.icon">
   {{good.name}}
   </span> 
  </li>
  </ul>
 </div>
 <div class="foods-wrapper">
  <ul ref="foodsWrapperUl">
  <li class="food-list food-list-hook" v-for="(good, index) in goods" :key="index">
   <h2 class="title">{{good.name}}</h2>
   <ul>
   <li class="food-item bottom-border-1px" v-for="(food, index) in good.foods" :key="index">
    <div class="icon">
    <img :src="food.icon" width="57" height="57" alt="">
    </div>
    <div class="content">
    <h3 class="name">{{food.name}}</h3>
    <p class="desc">{{food.description}}</p>
    <div class="extra">
     <span class="count">月售{{food.sellCount}}份</span>
     <span>好評{{food.rating}}%</span>
    </div>
    <div class="price">
     <span class="now">￥{{food.price}}</span>
     <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
    </div>
    <div class="cartcontrol-wrapper"><cartcontrol :food="food"/></div>
    </div>
   </li>
   </ul>
  </li>
  </ul>
 </div>
 </div>
</template>

<script>
 import BScroll from 'better-scroll'
 import { mapState } from 'vuex'
 import CartControl from "../../../components/CartControl/CartControl"
 export default {
 data() { 
  return {
  scrollY: 0,
  tops: []
  }
 },
 mounted () {
  this.$store.dispatch('getShopGoods', () => { //回調(diào)函數(shù)，等到action中執(zhí)行
  this.$nextTick(() => { //頁面更新后再使用滾動(dòng)組件，獲取DOM高度
   this._initScroll();
   this._initTops();
  })
  })
 },
 methods: {
  _initScroll() {
  new BScroll('.menu-wrapper', {
   click:true
  })

  this.foodsScroll = new BScroll('.foods-wrapper', {
   probeType: 2,
   click: true
  })

  this.foodsScroll.on('scroll', (pos) => {
   this.scrollY = Math.abs(pos.y);
  })

  this.foodsScroll.on('scrollEnd', (pos) => {
   this.scrollY = Math.abs(pos.y);
  })
  },

  _initTops () {
  const tops = [];
  let top = 0;
  tops.push(top);
  const lis = this.$refs.foodsWrapperUl.getElementByClassName('food-list-hook');
  Array.prototype.slice.call(lis).forEach((li, index) => {
   top += li.clientHeight;
   tops.push(top);
  })
  this.tops = tops;
  },

  clickMenuItem (index) {
  const top = this.tops[index];
  this.scrollY = top;
  this.foodsScroll.scrollTo(0, -top, 300)
  }
 },

 computed: {
  ...mapState(['goods']),
  currentIndex () {
  return this.tops.findIndex((top, index) => {
   return this.scrollY>=top && this.scrollY<this.tops[index+1]
  })
  }
 }
 }
</script>//也可以不用計(jì)算屬性，直接在data中定義currentIndex，改動(dòng)時(shí)賦新值，那頁面自然跟著更新

分享文章：vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)頁面的方法-創(chuàng)新互聯(lián)
路徑分享：http://bm7419.com/article48/cdioep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、服務(wù)器托管、靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、App設(shè)計(jì)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)