vue2.0中goods选购栏滚动算法的实现代码

前端之家收集整理的这篇文章主要介绍了vue2.0中goods选购栏滚动算法的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

不多说,直接代码,以便以后重复利用:

= height1 && this.scrollY < height2)) { return i; }; } return 0; } },created() { this.classMap = ['decrease','discount','special','invoice','guarantee']; this.$http.get('/api/goods').then((response) => { response = response.body; if (response.errno === ERR_OK) { this.goods = response.data; this.$nextTick(() => { this._initScroll(); this._calculateHeight(); }); } }); },methods: { _initScroll() { this.menuScroll = new BScroll(this.$refs.menuwrapper,{ click: true }); this.foodScroll = new BScroll(this.$refs.foodswrapper,{ probeType: 3 }); this.foodScroll.on('scroll',(pos) => { this.scrollY = Math.abs(Math.round(pos.y)); }); },_calculateHeight() { let foodList = this.$refs.foodswrapper.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); } },selectMenu(index,event) { if (!event._constructed) { return; }; console.log(index); let foodList = this.$refs.foodswrapper.getElementsByClassName('food-list-hook'); let el = foodList[index]; this.foodScroll.scrollToElement(el,300); } } };

以上所述是小编给大家介绍的vue2.0中goods选购栏滚动算法的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/39257.html

猜你在找的Vue相关文章