better-scroll不能滾動之 滾動監聽-左右聯動

滾動監聽

     better-scroll 沒法滾動的分析，直接翻到最後，看問題彙總，但願能幫助你解決。

　　借用一下人家這個好看的項目圖片，作一個解釋。左邊的內容會跟右邊的內容一塊兒關聯，點擊左邊的菜單，右邊會滾動到對應菜單的內容區域；滾動右邊的內容，左邊會滾動到對應的菜單項。 就是這個簡單的左右關聯的項目。方法提供了兩個。

 

jq的方法：

定義兩個方法：滾動的一個方法，和點擊的方法。

滾動方法：

const _scrollMethod = function(){
      document.addEventListener('scroll', function (e) {
        e.preventDefault();
        let sectionTitle = $('.icl-section-list-contents'); //獲取到list 的內容 ，下面將對這個 列表作遍歷
        let screenHeight = $(window).height();
        let scrollTop    = $(window).scrollTop();
        let scrollHeight = $(document).height();
        let sectionTitleHeight = $('.icl-section-list-contents').height();
        sectionTitle.each(function() { // 遍歷裏面的內容，抓取裏面的每一個標題的位置，作下面的高度比較邏輯處理
          let sectionTitleTop = $(this).offset().top - scrollTop;
          if(scrollTop+sectionTitleHeight>screenHeight){
            if(sectionTitleTop<(screenHeight/2)) {
              var index = sectionTitle.index($(this));
              $('.sectionList').find('.list-group-item').removeClass('active');
              $('.sectionList').find('.list-group-item').eq(index).addClass(function (index, activeClass) {
                activeClass = 'active';
                // console.log($(this))
                return activeClass;
              });
            } 
            
          }
        })
　　　　　// 滾到最後的內容，若是當節list 標題沒法滾動到屏幕中間的位置的時候，給左邊最後一個菜單,追加class  
    　　if(scrollTop + screenHeight == scrollHeight){
          $('.sectionList').find('.list-group-item').removeClass('active');
          $('.sectionList').find('.list-group-item').last().addClass('active');
        }
　　　　　　// 給第一個追加class 
        if ($(window).scrollTop() < 10 ){
          $('.sectionList').find('.list-group-item').removeClass('active');
          $('.sectionList').find('.list-group-item').eq(0).addClass('active');
        }
      }, false);
    }

點擊菜單的方法：

const _scroll =function () {
      $('.sectionList .list-group-item').click(function () {
        let chapterListTile  = $('.list-group-item');
        let _this = this;
        let chapterIndex =  chapterListTile.index(_this);
        var _thisScroll = $('.icl-section-list-contents').eq(chapterIndex);
　　　　　　// jq 的animate 的動畫方法，第一個參數滾動的距離，第二個參數 滾動時間 ，第三回掉函數
        $('html').animate({scrollTop:_thisScroll.offset().top - '200'}, 1000, function () {
          $('.sectionList').find('.list-group-item').removeClass('active');
          $(_this).addClass('active');
          let sectionId = $(_this).find('.icl-section-name').attr('id');   
        });
      })
    }

上面的代碼針對具體的項目，左右分欄，css 忽略。上面的方法，在抓取對應的index的時候，判斷遍歷當前的list的標題的位置，在當前屏幕的中間位置以上，才抓取index。 改進方法： 採用區間方法，遍歷數組後，獲取高度累加，造成一個數組， listHeigt + = current.clinetHeight

 

在vue 項目的一個插件方法：

 引用一個插件 better-scroll 

安裝

npm install better-scroll --save 

使用 （導入）

import BScroll from 'better-scroll'

這樣項目中就有了一個 BScroll 的對象。接下來就要初始化這個 BScroll 對象。

代碼以下：

mounted () { // 只有dom 在頁面顯示徹底後，bs 才能抓到高度,若是在那種tab 標籤的形式中，在display:none的狀況下，沒法抓取高度
    this.$nextTick(() => {
      this._initScroll();  // 將初始化的方法，封裝在這個方法中，下面就是對應的方法
      this.calculateHeight();
    })
  },

_initScroll () {

　　this.listScroll = new BScroll(this.$refs.newsListWrapper, {})

　　this.contentScroll = new BScroll(this.$refs.newsContentWrapper, {

　　probeType: 3, // 實時位置 暴露出來

　　});

　　this.contentScroll.on('scroll', (pos) => { // 這是bs 提供的一個滾動獲取 y 值的方法，這個 y 值怎麼算的

　　this.scrollY = Math.abs(Math.round(pos.y));

　　// console.log(this.scrollY,'scrolly的值')

　　});

},

在貼上計算高度的方法：

   calculateHeight () {
      var contentWrapper = this.$refs.foodList;  // == $('.el') 
      let height = 0;
      this.listHeight.push(height);
      for(var i=0;i<contentWrapper.length;i++) {
        let item = contentWrapper[i];
        height += item.clientHeight; // 得到每一個區間的高度
        this.listHeight.push(height);
        // console.log(this.listHeight,'listheight')
      }
    },

計算屬性的一個方法：

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

點擊菜單的一個方法：

selectMenu(index) {
  let foodList = this.$refs.foodList;
  let el = foodList[index];
  this.contentScroll.scrollToElement(el, 500); // bs 提供的滾動方法
},

 

這裏左右聯動的思想就是，抓取右邊元素的高度位置，而後看當前的高度在哪一個高度區間，就把這個 listHeight 的索引返回出來，用做 dom 上追加class的判斷。

 

 

在vue 實例的 mounted 的方法中，初始化這個 bs 對象。

順便解釋一下這的 關於vue的兩個知識點 mounted 和 $nextTick ：

$nextTick : 官方api  下面說

也就是 在dom 渲染好後，再執行某個關於dom的 執行方法，好比，要取dom 上的某個數據，這裏能夠用 setTimeout 替換這個 $nextTick。

mounted : 官方api 下說

也就是 el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子，vue的 el 掛載到 dom 上後調用 這個方法

和created的方法不同，created 是在 vue實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調, 可是掛載階段還沒開始，$el 屬性目前不可見。

（更多關於 vue 的筆記陸續更新中）

better-scroll 的方法注意事項。

這個插件的做者說：

網上不少同窗使用事後，會有發問求助說沒法滾動，這時候，不要急先把 本身初始化的bs 打印出來看看。下面是個人：

垂直方向不能滾動的主要三個屬性的 都不是正確的參數，說明，實例是初始化了，可是初始化後，相關的參數，它沒有獲取到，好比父級的高度和要滾動子集的高度。做者也強調了這個問題的關鍵，那麼什麼狀況會致使這個 高度沒有獲取到呢？ 

我遇到的一個坑：在使用tab 標籤裏初始化一個未被激活的tab 項，這個沒有被激活的項 dispaly:none ，高度沒法獲取。可是在 vue實例 執行後，這個 bs  已經初始化了，只不過初始化後的bs ，沒法獲取相關的高度到而已。而後，我一開始就讓這個使用bs的 tab激活，而後就有了相關的 參數

 

 

而後就能夠滾動了，因此總結問題呢：

遇到不能滾動的狀況如下分析：

1。是否初始化了父級元素，須要滾動的子元素是不是第一個

2。打印bs 對象，查看是否有bs對象，相關的參數（上面圖中已經畫出)，是否正確

3。父子高度是否有，且子高度大於父高度 （使用小訣竅： 先不要初始化這個bs，先看父子高度是否正確，再初始化這個bs 對象，確保實例化以前，高度得有）

 

以上是我我的的一些看法，若有不妥，歡迎指出，一塊兒交流。