vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
一.實(shí)現(xiàn)思路
- (1)實(shí)現(xiàn)上是左右分別一個(gè)better-scroll列表
- (2)利用計(jì)算右側(cè)列表每一個(gè)大區(qū)塊的高度來計(jì)算左側(cè)的位置
二.實(shí)現(xiàn)
1.實(shí)現(xiàn)左右兩個(gè)better-scroll
(1)dom結(jié)構(gòu)(better-scroll要求,會(huì)把最外層dom的第一個(gè)子元素作為要滾動(dòng)的區(qū)域)
左邊滾動(dòng)列表dom <div class="menu-wrapper" v-el:menu-wrapper> <ul> <li v-for="item in goods" class="menu-item" :class="{'current':currentIndex === $index}" @click="selectMenu($index,$event)"> <span class="text border-1px"> <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> 右邊滾動(dòng)列表dom <div class="food-wrapper" v-el:food-wrapper> <ul> <li v-for="item in goods" class="food-list food-list-hook"> <h1 class="title">{{item.name}}</h1> <ul> <li v-for="food in item.foods" class="food-item border-1px"> <div class="icon"> <img width="57" height="57" :src="food.icon"> </div> <div class="content"> <h2 class="name">{{food.name}}</h2> <p class="desc">{{food.description}}</p> <div class="extra"> <span class="count">月售{{food.sellCount}}份</span> <span>好評(píng)率{{food.rating}}%</span> <div class="price"> <span class="now">¥{{food.price}}</span> <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span> </div> </div> </div> </li> </ul> </li> </ul> </div>
在數(shù)據(jù)請(qǐng)求完成后的$nextTick中初始化better-scroll,就能實(shí)現(xiàn)兩個(gè)列表分別能滾動(dòng),至于聯(lián)動(dòng),要后面自己做
_initScroll() { this.menuScroll = new BScroll(this.$els.menuWrapper,{ click:true //允許better-scroll列表上的點(diǎn)擊事件 }); this.foodsScroll = new BScroll(this.$els.foodWrapper,{ probeType : 3 //讓better-scroll監(jiān)聽scroll事件 }); this.foodsScroll.on('scroll',(pos) => { this.scrollY =Math.abs(Math.round(pos.y)); }) },
2.實(shí)現(xiàn)聯(lián)動(dòng)效果
(1)具體的聯(lián)動(dòng)實(shí)現(xiàn)思路
- 在渲染完成后($nextTick內(nèi)),初始化better-scroll,并在初始化函數(shù)內(nèi)添加右側(cè)列表的scroll監(jiān)聽事件,并記錄scrollY值到,存入vue的data中
- 在渲染完成后($nextTick內(nèi)),計(jì)算右側(cè)列表的每一個(gè)大區(qū)塊的高度,并累加,存入數(shù)組listHeight
- 因?yàn)閟crollY值在滾動(dòng)中總是不斷變化的,所以在computed中計(jì)算出currentIndex,當(dāng)前滾動(dòng)區(qū)域是哪一個(gè)大區(qū)塊,也就是listHeight數(shù)組的下標(biāo)
- 在dom中根據(jù)currentIndex應(yīng)用左側(cè)列表被點(diǎn)中的樣式
- 在左側(cè)列表某一項(xiàng)被點(diǎn)中的時(shí)候,右側(cè)列表滑動(dòng)到某一個(gè)大塊區(qū)域,
//初始化better-scroll _initScroll() { this.menuScroll = new BScroll(this.$els.menuWrapper,{ click:true }); this.foodsScroll = new BScroll(this.$els.foodWrapper,{ probeType : 3 }); this.foodsScroll.on('scroll',(pos) => { this.scrollY =Math.abs(Math.round(pos.y)); }) },
_calculateHeight() { let foodList = this.$els.foodWrapper.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); } }
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; } },
<div class="menu-wrapper" v-el:menu-wrapper> <ul> <!-- :class="{'current':currentIndex === $index}" 就是根據(jù)currentIndex應(yīng)用左側(cè)列表被點(diǎn)中的樣式 --> <li v-for="item in goods" class="menu-item" :class="{'current':currentIndex === $index}" @click="selectMenu($index,$event)"> <span class="text border-1px"> <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div>
//被點(diǎn)擊事件 //dom <div class="menu-wrapper" v-el:menu-wrapper> <ul> <!-- @click="selectMenu($index,$event)" 就是點(diǎn)擊事件 --> <li v-for="item in goods" class="menu-item" :class="{'current':currentIndex === $index}" @click="selectMenu($index,$event)"> <span class="text border-1px"> <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> //js selectMenu(index,event) { if(!event._constructed) { return ; } let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook"); let el = foodList[index]; this.foodsScroll.scrollToElement(el,300); },
以上所述是小編給大家介紹的vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解 vue better-scroll滾動(dòng)插件排坑
- vue滾動(dòng)軸插件better-scroll使用詳解
- vue利用better-scroll實(shí)現(xiàn)輪播圖與頁面滾動(dòng)詳解
- vue滾動(dòng)插件better-scroll使用詳解
- vue使用 better-scroll的參數(shù)和方法詳解
- vue.js2.0 實(shí)現(xiàn)better-scroll的滾動(dòng)效果實(shí)例詳解
- vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
- vue better-scroll插件使用詳解
- vue2.0 better-scroll 實(shí)現(xiàn)移動(dòng)端滑動(dòng)的示例代碼
- Vue中利用better-scroll組件實(shí)現(xiàn)橫向滾動(dòng)功能
相關(guān)文章
Vue3項(xiàng)目剛創(chuàng)建就報(bào)錯(cuò)的問題及解決
這篇文章主要介紹了Vue3項(xiàng)目剛創(chuàng)建就報(bào)錯(cuò)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10在vue里面設(shè)置全局變量或數(shù)據(jù)的方法
下面小編就為大家分享一篇在vue里面設(shè)置全局變量或數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁面示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07使用vue實(shí)現(xiàn)通過變量動(dòng)態(tài)拼接url
這篇文章主要介紹了使用vue實(shí)現(xiàn)通過變量動(dòng)態(tài)拼接url,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07