实现的效果如下图所示：项目来源《Vue.js高仿饿了么实战》
这里是对better-scroll 组件的简单应用，可以参考文章：https://www.imooc.com/article/18232#
本文对这个页面功能的better-scroll应用做点小的改进，记录学习过程，分享大家！
教学项目里做的效果是左侧列表滚动，右边菜单导航条的高亮切换显示，但有个问题，如果高亮的菜单藏在视口范围之下，就看不到当前哪个菜单被高亮了，于是乎需要改进，即当上图左侧列表滚动时，如果当前需要高亮显示的菜单不在可视区域的情况下，自动把右侧菜单导航条滚动，让当前高亮的菜单显示出来。
做法如下：
let menuScrollQueue;
this.foodScroll.on('scroll', (pos) => {
this.scrollY = Math.abs(Math.round(pos.y));
// this.currentMenuIndex = 0;
// 把menu -wrapper中不在当前可视区域的元素自动滚动出来
var mlist = this.$refs.menuWrapper.getElementsByClassName('menu-item-hook');
var mtarget = mlist[this.currentIndex];
var _cx = mtarget.offsetTop + (mtarget.offsetHeight / 2);
var visibleBottom = this.menuScrollY + this.$refs.menuWrapper.clientHeight;
console.log('>>>>' + this.scrollY);
if (_cx < this.menuScrollY || _cx > visibleBottom) {
if (menuScrollQueue) {
clearTimeout(menuScrollQueue);
}
menuScrollQueue = setTimeout(() => {
console.log(mtarget);
this.menuScroll.scrollToElement(mtarget, 300);
}, 20);
}
});
在实际测试过程中，foodScroll的scroll 事件被频繁触发，为了防止menuScroll.scrollToElement 多次执行，浪费效率，特定义了menuScrollQueue 减少执行的次数，在不是加速上下快速滑动滚动情况下，实际只会执行1到2次，至于完全避免重复执行，尚需对better-scroll深入学习或改进来满足需求。
完整代码如下：
<
template
>
<
div
class=
"goods"
>
<
div
class=
"menu-wrapper"
ref=
"menuWrapper"
>
<
ul
>
<
li
:key="index"
v-for="(itm,index)
in goods"
class=
"menu-item menu-item-hook"
:class="{
'current':currentIndex===index}"
v-on:click="gotoIndex(index,$event)"
>
<
span
class=
"text border-1px"
>
<
span
class=
"icon"
:class="classMap[itm.type]"
v-show="itm.type>
0"
></
span
>{{itm.name}}
</
span
>
</
li
>
</
ul
>
</
div
>
<
div
class=
"foods-wrapper"
ref=
"foodsWrapper"
>
<
ul
>
<
li
:key="g.name"
v-for="g
in goods"
class=
"food-list-hook"
>
<
h1
class=
"title"
>{{g.name}}
</
h1
>
<
ul
>
<
li
:key="f.name"
v-for="f
in g.foods"
class=
"food-item"
>
<
div
class=
"icon"
>
<
img
width=
"57"
height=
"57"
:src="f.image"
/>
</
div
>
<
div
class=
"content"
>
<
h2
class=
"name"
>{{f.name}}
</
h2
>
<
p
class=
"desc"
>{{f.description}}
</
p
>
<
div
class=
"extra"
>
<
span
class=
"count"
>月售{{f.sellCount}}份
</
span
>
<
span
>好评率{{f.rating}}%
</
span
>
</
div
>
<
div
class=
"price"
>
<
span
class=
"now"
><
i
>¥
</
i
>{{f.price}}
</
span
><
span
class=
"old"
v-show="f.oldPrice"
><
i
>¥
</
i
>{{f.oldPrice}}
</
span
>
</
div
>
<
div
class=
"char-ctrl"
>
<
chartCtrl
:food="f"
></
chartCtrl
>
</
div
>
</
div
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
<
shopChart
:delivery-price="seller.deliveryPrice"
:min-price="seller.minPrice"
></
shopChart
>
</
div
>
</
template
>
<
script
>
import BScroll
from
'better-scroll';
import shopChart
from
'../shopchart/shopchart.vue';
import chartCtrl
from
'../chartcontrol/chartcontrol.vue';
let menuScrollQueue;
export
default {
props: [
'seller'],
data () {
return {
goods: [],
classMap: [],
scrollY:
0,
menuScrollY:
0,
foodsClientHeight: [],
currentMenuIndex:
0
};
},
components: {
shopChart,
chartCtrl
},
computed: {
currentIndex: {
get () {
for (
let i =
0; i <
this.foodsClientHeight.length; i++) {
let h1 =
this.foodsClientHeight[i];
let h2 =
this.foodsClientHeight[i +
1];
if (!h2 || (
this.scrollY >= h1 &&
this.scrollY < h2)) {
console.log(
`h1=
${h1
}
,h2=
${h2
}
`);
console.log(
'>>>>>>>>>>>>>>>>>' + i +
' scrollY=' +
this.scrollY);
return i;
}
}
return
0;
}
}
},
created () {
this.classMap = [
'decrease',
'discount',
'guarantee',
'invoice',
'special'];
this.$http.get(global.host.api +
'/getGoods').then((responose)
=> {
this.goods = responose.data;
this.$nextTick(()
=> {
this._initScroller();
this._calculatorFoodsHeight();
});
});
},
methods: {
_initScroller () {
this.menuScroll =
new BScroll(
this.$refs.menuWrapper, {
probeType:
3,
click:
true
});
this.foodScroll =
new BScroll(
this.$refs.foodsWrapper, {
probeType:
3,
click:
true
});
console.log(
'_initScroller..................');
this.menuScroll.on(
'scroll', (pos)
=> {
this.menuScrollY = Math.abs(Math.round(pos.y));
});
this.foodScroll.on(
'scroll', (pos)
=> {
this.scrollY = Math.abs(Math.round(pos.y));
// this.currentMenuIndex = 0;
// 把menu -wrapper中不在当前可视区域的元素自动滚动出来
var mlist =
this.$refs.menuWrapper.getElementsByClassName(
'menu-item-hook');
var mtarget = mlist[
this.currentIndex];
var _cx = mtarget.offsetTop + (mtarget.offsetHeight /
2);
var visibleBottom =
this.menuScrollY +
this.$refs.menuWrapper.clientHeight;
console.log(
'>>>>' +
this.scrollY);
if (_cx <
this.menuScrollY || _cx > visibleBottom) {
if (menuScrollQueue) {
clearTimeout(menuScrollQueue);
}
menuScrollQueue = setTimeout(()
=> {
console.log(mtarget);
this.menuScroll.scrollToElement(mtarget,
300);
},
20);
}
});
},
_calculatorFoodsHeight () {
this.foodsClientHeight = [];
var flist =
this.$refs.foodsWrapper.getElementsByClassName(
'food-list-hook');
this.foodsClientHeight.push(
0);
let _h =
0;
for (
var i =
0; i < flist.length; i++) {
_h += flist[i].clientHeight;
this.foodsClientHeight.push(_h -
1);
// console.log(_h);
}
},
gotoIndex (index, event) {
if (!event._constructed) {
return
false;
}
var flist =
this.$refs.foodsWrapper.getElementsByClassName(
'food-list-hook');
var target = flist[index];
this.foodScroll.scrollToElement(target,
300);
this.currentMenuIndex = index;
// console.log(this.currentIndex);
}
}
};
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
scoped
lang=
'stylus'
type=
'text/stylus'
>
@
import
'../../common/stylus/mixin.styl';
.goods
display flex
position absolute
top
168px
bottom
46px
width
100%
overflow hidden
.menu-wrapper
flex
0
0
80px
background-color #f3f5f7
.menu-item
display table
width
56px
height
54px
padding
0
12px
line-height
14px
font-size
0
&.current
position relative
z-index
10
margin-top
-1px
background #fff
font-weight
700
.text
border-none()
.icon
display inline-block
vertical-align top
width
12px
height
12px
margin-right
2px
background-size
12px
12px
background-repeat no-repeat
&.decrease
bg-image(
'decrease_3')
&.discount
bg-image(
'discount_3')
&.guarantee
bg-image(
'guarantee_3')
&.invoice
bg-image(
'invoice_3')
&.special
bg-image(
'special_3')
.text
display table-cell
width
56px
vertical-align middle
border-1px(rgba(
7,
17,
27,
0.1))
font-size
12px
.foods-wrapper
flex
1
.title
padding-left
14px
height
26px
line-height
26px
border-left
2px solid #d9dde1
font-size
12px
color rgb(
147,
153,
159)
background-color #f3f5f7
.food-item
position relative
display flex
margin
18px
padding-bottom
18px
border-1px(rgba(
7,
17,
27,
0.1))
&:last-child
border-none()
margin-bottom
0
.icon
flex
0
0
57px
margin-right
10px
.content
flex
1
.name
margin
2px
0
8px
0
height
14px
line-height
14px
font-size
14px
.desc, .extra
line-height
10px
font-size
10px
color rgb(
147,
153,
159)
.desc
line-height
12px
margin-bottom
8px
.extra
.count
margin-right
12px
.price
font-weight
400px
line-height
24px
.now
margin-right
8px
font-size
14px
color rgb(
240,
20,
20)
.old
text-decoration line-through
font-size
10px
color rgb(
147,
153,
159)
.char-ctrl
position absolute
right
0px
bottom
5px
</
style
>