vue滚动轴插件better-scroll使用详解
发布时间：2020-12-17 02:46:05 所属栏目：百科 来源：网络整理
导读：跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll，用来计算左侧menu栏对应右侧foods栏相应显示的食物区，如果不用插件就比较费事了，因此这里分享一下这个插件的简单使用： 一、项目中下载，并引入 在配置文件package.json中引入版本 然后进入
|
跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll，用来计算左侧menu栏对应右侧foods栏相应显示的食物区，如果不用插件就比较费事了，因此这里分享一下这个插件的简单使用： 一、项目中下载，并引入 在配置文件package.json中引入版本 然后进入项目目录,打开cmd更新配置 最后引入，比如我在项目goods组件中使用则： 二、举个栗子 需求是处于当前比如热销榜栏目，则菜单栏高亮。滚动到下一栏高亮栏目则下一栏菜单高亮。点击菜单中某一栏菜单该栏目高亮并且跳转到对应食物区。 下面是foods组件中的代码 template： script = 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);
}
}
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |