真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

怎么在vue中使用better-scroll實現(xiàn)一個列表左右聯(lián)動效果

本篇文章給大家分享的是有關(guān)怎么在vue中使用better-scroll實現(xiàn)一個列表左右聯(lián)動效果，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)建站是專業(yè)的高昌網(wǎng)站建設(shè)公司，高昌接單;提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行高昌網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

一.實現(xiàn)思路

(1)實現(xiàn)上是左右分別一個better-scroll列表
(2)利用計算右側(cè)列表每一個大區(qū)塊的高度來計算左側(cè)的位置

二.實現(xiàn)

1.實現(xiàn)左右兩個better-scroll

(1)dom結(jié)構(gòu)(better-scroll要求,會把最外層dom的第一個子元素作為要滾動的區(qū)域)

左邊滾動列表dom
 
   
    
     
       0" class="icon"
       :class="classMap[item.type]">{{item.name}}

右邊滾動列表dom

月售{{food.sellCount}}份好評率{{food.rating}}% ¥{{food.price}} ¥{{food.oldPrice}}

在數(shù)據(jù)請求完成后的$nextTick中初始化better-scroll,就能實現(xiàn)兩個列表分別能滾動,至于聯(lián)動,要后面自己做

_initScroll() { this.menuScroll = new BScroll(this.$els.menuWrapper,{ click:true //允許better-scroll列表上的點擊事件 }); 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.實現(xiàn)聯(lián)動效果

(1)具體的聯(lián)動實現(xiàn)思路

在渲染完成后($nextTick內(nèi)),初始化better-scroll,并在初始化函數(shù)內(nèi)添加右側(cè)列表的scroll監(jiān)聽事件,并記錄scrollY值到,存入vue的data中

在渲染完成后($nextTick內(nèi)),計算右側(cè)列表的每一個大區(qū)塊的高度,并累加,存入數(shù)組listHeight

因為scrollY值在滾動中總是不斷變化的,所以在computed中計算出currentIndex,當(dāng)前滾動區(qū)域是哪一個大區(qū)塊,也就是listHeight數(shù)組的下標(biāo)

在dom中根據(jù)currentIndex應(yīng)用左側(cè)列表被點中的樣式

在左側(cè)列表某一項被點中的時候,右側(cè)列表滑動到某一個大塊區(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

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;
   }
  },


   
    
    
     
       0" class="icon"
       :class="classMap[item.type]">{{item.name}}

//被點擊事件
//dom

   
    
    
     
       0" class="icon"
       :class="classMap[item.type]">{{item.name}}
     
    
   
  
//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實現(xiàn)一個列表左右聯(lián)動效果，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：怎么在vue中使用better-scroll實現(xiàn)一個列表左右聯(lián)動效果
轉(zhuǎn)載來于：http://weahome.cn/article/jhossg.html