不多说,直接代码,以便以后重复利用:
& lt;脚本类型=拔谋?ecmascript-6”比;
从“进口BScroll better-scroll ';
const ERR_OK=0;
出口默认{
道具:{
销售:{
对象类型:
｝
}，
数据(){
返回{
商品:[],
listHeight: [],
scrollY: 0
}；
}，
计算:{
currentIndex () {
(让我=0;我& lt;this.listHeight.length;我+ +){
让height1=this.listHeight[我];
这让height2=istHeight (i + 1);
如果(!height2 | |(这一点。scrollY祝辞=height1,,这一点。scrollY & lt;height2)) {
返回我;
}；
｝
返回0;
｝
}，
创建(){
这一点。classMap=[“减少”,“折扣”,“特殊”,“发票”、“保证”);
http.get美元。(“/api/货物”)((响应)=比;{
响应=response.body;
如果响应。errno===ERR_OK) {
这一点。商品=response.data;
美元。nextTick(()=比;{
this._initScroll ();
this._calculateHeight ();
}）;
｝
}）;
}，
方法:{
_initScroll () {
这一点。menuScroll=new BScroll参(这个。。menuwrapper, {
点击:真
}）;
这一点。foodScroll=new BScroll参(这个。。foodswrapper, {
probeType: 3
}）;
this.foodScroll。(“滚动”,(pos)=比;{
这一点。scrollY=Math.abs (Math.round (pos.y));
}）;
}，
_calculateHeight () {
让foodList=Ｃ涝猺efs.foodswrapper.getElementsByClassName (“food-list-hook”);
让身高=0;
this.listHeight.push(高度);
(让我=0;我& lt;foodList.length;我+ +){
让项目=foodList[我];
+=item.clientHeight高度;
this.listHeight.push(高度);
｝
}，
selectMenu(指数、事件){
如果(! event._constructed) {
返回;
}；
console.log(指数);
让foodList=Ｃ涝猺efs.foodswrapper.getElementsByClassName (“food-list-hook”);
让el=foodList(指数);
this.foodScroll。scrollToElement(埃尔,300年);
｝
｝
}；
& lt;/script>
以上所述是小编给大家介绍的vue2.0中商品选购栏滚动算法的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
