您好,登錄后才能下訂單哦!
跟做慕課網(wǎng)的vue高仿外賣項(xiàng)目中用到了一個(gè)很好用的插件BScroll,用來計(jì)算左側(cè)menu欄對(duì)應(yīng)右側(cè)foods欄相應(yīng)顯示的食物區(qū),如果不用插件就比較費(fèi)事了,因此這里分享一下這個(gè)插件的簡單使用:
一、項(xiàng)目中下載,并引入
在配置文件package.json中引入版本
"dependencies": { "better-scroll": "^0.1.7" }
然后進(jìn)入項(xiàng)目目錄,打開cmd更新配置
npm i (i是install縮寫)
最后引入,比如我在項(xiàng)目goods組件中使用則:
import BScroll from 'better-scroll';
二、舉個(gè)栗子
需求是處于當(dāng)前比如熱銷榜欄目,則菜單欄高亮。滾動(dòng)到下一欄高亮欄目則下一欄菜單高亮。點(diǎn)擊菜單中某一欄菜單該欄目高亮并且跳轉(zhuǎn)到對(duì)應(yīng)食物區(qū)。
下面是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: {//接收父組件傳的數(shù)據(jù) seller: { type: Object } }, data () { return { goods: [], listHeight: [],//菜單中一個(gè)菜單欄目的高度 scrollY: 0//定義的Y滾動(dòng)軸及初始值 }; }, computed: {//計(jì)算屬性 currentIndex () {//當(dāng)前菜單欄在整個(gè)菜單中的下標(biāo)index for (let i = 0; i < this.listHeight.length; i++) {//遍歷菜單中每個(gè)欄目的高度 let height1 = this.listHeight[i];//第i個(gè)欄目的高度 let height2 = this.listHeight[i + 1];//第i+1個(gè)欄目的高度 if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {//根據(jù)當(dāng)前滾動(dòng)軸的位置得出index(如果第二個(gè)欄目不存在即第一個(gè)欄目是最后一個(gè))或者(當(dāng)前欄目高度大于等于第一個(gè)并且當(dāng)前滾動(dòng)軸小于第二個(gè)欄目高度) 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>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。