溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
跟做慕課網的vue高仿外賣項目中用到了一個很好用的插件BScroll，用來計算左側menu欄對應右側foods欄相應顯示的食物區，如果不用插件就比較費事了，因此這里分享一下這個插件的簡單使用：
一、項目中下載，并引入
在配置文件package.json中引入版本
"dependencies": {
"better-scroll": "^0.1.7"
}
然后進入項目目錄,打開cmd更新配置
npm i (i是install縮寫)
最后引入，比如我在項目goods組件中使用則：
import BScroll from 'better-scroll';
二、舉個栗子
需求是處于當前比如熱銷榜欄目，則菜單欄高亮。滾動到下一欄高亮欄目則下一欄菜單高亮。點擊菜單中某一欄菜單該欄目高亮并且跳轉到對應食物區。
下面是foods組件中的代碼
template：
<template>
<div class="goods">
<div class="menu-wrap" ref="menuWrap">//菜單欄
<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="foods-wrap" ref="foodsWrap">//食物欄
</div>
</div>
</template>
script
<script type="text/ecmascript-6">
import Vue from 'vue';
import BScroll from 'better-scroll';
import shopcart from '@/components/shopcart/shopcart';
export default {
props: {//接收父組件傳的數據
seller: {
type: Object
}
},
data () {
return {
goods: [],
listHeight: [],//菜單中一個菜單欄目的高度
scrollY: 0//定義的Y滾動軸及初始值
};
},
computed: {//計算屬性
currentIndex () {//當前菜單欄在整個菜單中的下標index
for (let i = 0; i < this.listHeight.length; i++) {//遍歷菜單中每個欄目的高度
let height1 = this.listHeight[i];//第i個欄目的高度
let height2 = this.listHeight[i + 1];//第i+1個欄目的高度
if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {//根據當前滾動軸的位置得出index(如果第二個欄目不存在即第一個欄目是最后一個)或者(當前欄目高度大于等于第一個并且當前滾動軸小于第二個欄目高度)
return i;//如果滿足則返回index
}
}
return 0;//初始值0
}
},
created () {
Vue.prototype.$http.get('/api/goods')
.then(res => {
this.goods = res.data.data;
this.$nextTick(() => {//
this._initScroll();
this._calculateHeight();
});
});
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
},
methods: {
selectMenu (index, event) {
if (!event._constructed) {
return;
}
let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook');
let el = foodList[index];
this.foodsScroll.scrollToElement(el, 300);
},
_initScroll () {
this.menuScroll = new BScroll(this.$refs.menuWrap, {
click: true
});
this.foodsScroll = new BScroll(this.$refs.foodsWrap, {probeType: 3
});
this.foodsScroll.on('scroll', (pos) => {
this.scrollY = Math.abs(Math.round(pos.y));
console.log(this.scrollY);
});
},
_calculateHeight () {
let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook');
let height = 0;
this.listHeight.push(height);
for (let i = 0; i < foodList.length; i++) {
let item = foodList[i];
height += item.clientHeight;
this.listHeight.push(height);
}
}
}
};
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
