vue2.0中goods選購欄滾動算法的實現(xiàn)代碼
更新時間:2017年05月17日 10:14:14 作者:qq_32486147
這篇文章主要介紹了vue2.0中goods選購欄滾動算法的實現(xiàn)代碼,需要的朋友可以參考下
不多說,直接代碼,以便以后重復利用:
<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
const ERR_OK = 0;
export default {
props: {
sell: {
type: Object
}
},
data() {
return {
goods: [],
listHeight: [],
scrollY: 0
};
},
computed: {
currentIndex() {
for (let 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;
}
},
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);
}
}
};
</script>
以上所述是小編給大家介紹的vue2.0中goods選購欄滾動算法的實現(xiàn)代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
Vue3使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析
在本篇文章里小編給大家整理的是一篇關于Vue3使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析內(nèi)容,有需要的朋友們可以跟著學習參考下。2021-11-11
Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復制按鈕
這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復制按鈕,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11

