vue2.0中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼
不多說(shuō),直接代碼,以便以后重復(fù)利用:
<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中g(shù)oods選購(gòu)欄滾動(dòng)算法的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue.js 實(shí)現(xiàn)點(diǎn)擊div標(biāo)簽時(shí)改變樣式
這篇文章主要介紹了vue.js 實(shí)現(xiàn)點(diǎn)擊div標(biāo)簽時(shí)改變樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
Vue3實(shí)現(xiàn)跨頁(yè)面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁(yè)面?zhèn)髦悼梢酝ㄟ^(guò)多種方式實(shí)現(xiàn),具體選擇哪種方法取決于應(yīng)用的具體需求和頁(yè)面間的關(guān)系,本文列舉了幾種常見的跨頁(yè)面?zhèn)髦捣椒?感興趣的同學(xué)跟著小編來(lái)看看吧2024-04-04
vue實(shí)現(xiàn)三級(jí)頁(yè)面跳轉(zhuǎn)功能
這篇文章主要介紹了vue實(shí)現(xiàn)三級(jí)頁(yè)面跳轉(zhuǎn)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
iview 權(quán)限管理的實(shí)現(xiàn)
本文主要介紹了iview 權(quán)限管理,iview-admin2.0自帶權(quán)限管理??梢酝ㄟ^(guò)設(shè)置路由的meta對(duì)象的參數(shù)access來(lái)分配權(quán)限。感興趣的可以了解一下2021-07-07
Vue開發(fā)手冊(cè)Function-based?API?RFC
這篇文章主要為大家介紹了Vue開發(fā)手冊(cè)Function-based?API?RFC使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
vue+element實(shí)現(xiàn)手機(jī)號(hào)驗(yàn)證碼注冊(cè)的示例
本文主要介紹了vue+element實(shí)現(xiàn)手機(jī)號(hào)驗(yàn)證碼注冊(cè)的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01

