你可以去这里找到完整的源码和更多的内容: https://github.com/Tiramisu1/vueElem
效果图如下, emmm.....还不知道怎么上传动图,就将就着看吧,相信你能想象的出来的。
1、左侧菜单栏和右侧的食品栏都是使用的 better-scroll 组件,怎么使用,请看下面的代码。
// 这里是左侧菜单
// 这里是右侧食品
//请记住这个ref
-
{{item.name}}
-
{{food.name}}
{{food.description}}
{{'月售'+food.sellCount+'份'}}
{{'好评率'+food.rating+'%'}}
¥{{food.price}}
¥{{food.oldPrice}}
//我是一个自定义组件请不要在意
2、使用 better-scroll,肯定是先要引用的。
// script
import BScroll from "better-scroll";
created() {
this.initScroll();
},
methods: {
//设置右侧内容滚动
initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
click: true //可以点击
});
this.foodScroll = new BScroll(this.$refs.foodsWrapper, {
probeType: 3, //检测滚动的位置
click: true
})
}
3、先来实现左侧点击,右侧滚动的效果,在左侧菜单添加一个click事件。关于 scrollToElement 以及better-scroll 组件,你可以看看这个。要解释就太多了,我懒。
//html
请参考第一部分的HTML代码........相信你能看懂的
// Methods
selectMenu(index, event) {
if (!event._constructed) {
//避免点击事件发生两次
return;
}
let foodList = this.$refs.foodsWrapper.getElementsByClassName(
"food-list-hook"
);
let el = foodList[index];
this.foodScroll.scrollToElement(el, 300);
}
4、接下来右侧内容滚动控制左侧菜单,首先获取右侧内容的高度并放置在一个数组里。
// methods
//获取右侧内容高度
calculateHeight() {
let foodList = this.$refs.foodsWrapper.getElementsByClassName(
"food-list-hook"
);
let height = 0;
this.listHeight.push(height);
for (var i = 0; i < foodList.length; i++) {
let item = foodList[i];
height += item.clientHeight; //元素内容及其边框所占据的空间大小
this.listHeight.push(height);
}
}
当然你需要把这个方法放进 created 里面,就像之前的 initScroll 方法一样。
5、同时我们需要获取到右侧内容滚动的高度,为了后面判断做对比。
// methods
// 获取滚动的Y轴
this.foodScroll.on("scroll", pos => {
this.scrollY = Math.abs(Math.round(pos.y));
});
emmmm..... 你可以把它放在 initScroll 方法里面, 就像这样
//设置右侧内容滚动
initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
click: true //可以点击
});
this.foodScroll = new BScroll(this.$refs.foodsWrapper, {
probeType: 3, //检测滚动的位置
click: true
});
// 获取滚动的Y轴
this.foodScroll.on("scroll", pos => {
this.scrollY = Math.abs(Math.round(pos.y));
});
}
6、最后,高度有了,Y轴有了,来对决吧,还记得左侧菜单的高亮么?
// html
// js
computed: {
currentIndex() {
for (var 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)) {
return i;
}
}
return 0;
}
}
至于css 相信你可以的!
如果你不是很懂, 建议你去看看这篇文章 https://www.imooc.com/article/18232