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ì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- vue diff算法全解析
- 詳解Vue2的diff算法
- 一篇文章帶你搞懂Vue虛擬Dom與diff算法
- 詳解vue3.0 diff算法的使用(超詳細(xì))
- 詳解為什么Vue中不要用index作為key(diff算法)
- Vue的transition-group與Virtual Dom Diff算法的使用
- Vue實(shí)現(xiàn)開(kāi)心消消樂(lè)游戲算法
- 基于Vue實(shí)現(xiàn)電商SKU組合算法問(wèn)題
- 詳解vue的diff算法原理
- vue的diff算法知識(shí)點(diǎn)總結(jié)
- 解析Vue 2.5的Diff算法
- LRU算法在Vue內(nèi)置組件keep-alive中的使用
相關(guān)文章
Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue中動(dòng)態(tài)Class的實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue3使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的原因分析
在本篇文章里小編給大家整理的是一篇關(guān)于Vue3使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的原因分析內(nèi)容,有需要的朋友們可以跟著學(xué)習(xí)參考下。2021-11-11
Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能【推薦】
大家都經(jīng)常使用美團(tuán)app買(mǎi)電影票,很多朋友不知道她的功能是怎么實(shí)現(xiàn)的,作為我程序員一枚對(duì)它的算法很好奇,今天小編就把基于Vue實(shí)現(xiàn)美團(tuán)app的影院推薦選座功能分享到腳本之家平臺(tái),感興趣的朋友一起看看吧2018-08-08
vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11

