基于better-scroll的vue滾動組件

xiaotianyi 發(fā)布于2019-08-23 18:09 / 1094人閱讀

摘要：讓用戶可以滾動頁面。事件中拿到想要的后瀏覽器已經(jīng)隱藏地址欄和工具欄，放開插件滾動。發(fā)現(xiàn)派發(fā)的方法在父組件中監(jiān)聽后獲取位置參數(shù)的效果不太好必須要手指貼著滑動才可以這個設(shè)置為可以實時派發(fā)滾動事件和位置參數(shù)其他坑點待發(fā)現(xiàn)歡迎大佬一起交流

寫在前面

由于最近一個移動端項目中許多地方有滾動需求, 橫向,縱向的都有,所以就基于better-scroll封裝了一個通用的滾動組件,期間也踩了一些坑,有時候會滾動失效,初始化的時候就不能滾動等等...
better-scroll地址: https://ustbhuangyi.github.io...

滾動組件代碼

當(dāng)然, 我們還可以添加更多的配置功能, 這個需要依據(jù)你自己的需求來了,詳情配置去better-scroll官網(wǎng)看看

使用scroll組件 縱向滾動


      
           添加需要滾動的DOM元素: 如ul>li等, 或者多個子組件
      

// 下面是樣式
.main {
  width: 100%;
  height: calc(100vh - 52px);
  background-color: #f7f8fa;
  .main-content {
    height: 100%;
    overflow: hidden;
    position: relative;
  }
}

縱向滾動主要是要注意的是: scroll下的第一個子元素，它的高度需要讓內(nèi)容來撐開!!! 否則無法滾動
圖片中已經(jīng)標(biāo)識出來了...

橫向滾動


// 樣式

橫向滾動下我們傳入配置值就行了; 這里主要是注意樣式的書寫! 也就是scroll下的第一個子元素的寬度要由內(nèi)容撐寬才可以...,代碼塊中也標(biāo)注出來了.

踩過的坑點

1.純靜態(tài)頁面的滾動

舉個栗子,我現(xiàn)在寫了一個彈出層,就是靜態(tài)數(shù)據(jù)渲染,但是需求也需要滾動,因為單頁可能顯示不下, 雖說better-scroll的原理是第一個子元素超出父盒子就可以實現(xiàn)滾動了, 彈出層只有在點擊彈窗的時候才會渲染,所以是無法滾動的, 在彈窗出來后再手動刷新scroll組件; 這里我們就可以通過那個data屬性搞事情了,每次點擊彈窗后,往data中丟個數(shù)據(jù),這樣會觸發(fā)scroll組件的watch, 然后手動刷新,就可以實現(xiàn)滾動了...

// 部分代碼示例
 // 側(cè)邊欄彈出層組件
methods: {
    showPopup() {
      this.onOff.push("1"), // 刷新scroll組件
      this.$refs.aside.show();
    }
  }

2.scroll容器數(shù)據(jù)變化導(dǎo)致無法正常滾動, 可能情況是:

- 初始化的時候就有問題,去檢查一下第一個子元素高度||寬度是否是由其子元素?fù)伍_的

- 接口數(shù)據(jù)還未請求回來就初始化了, 比如圖片,此時初始化就沒算上圖片的高度,
 這時候就需要手動調(diào)用this.$refs.scroll.refresh()來刷新scroll組件, 矯正滾動高度
 
- 頁面容器設(shè)為100vh后發(fā)現(xiàn), 無法觸發(fā)上滑隱藏URL框的需求;
    消除手機URL欄: 需要滿足列表的高度需要設(shè)置固定,外層盒子要大于手機視口高度,滑動時才能消除url地址欄
 
          解決：監(jiān)聽頁面路由事件beforeRouteEnter,先禁止掉scroll插件的滾動。
          讓用戶可以滾動頁面。
          window.onscroll事件中拿到想要的scrollTop后（瀏覽器已經(jīng)隱藏地址欄和工具欄），放開scroll插件滾動。

- 發(fā)現(xiàn)better-scroll派發(fā)的scroll方法, 在父組件中監(jiān)聽后獲取位置參數(shù)的效果不太好; 必須要手指貼著滑動才可以...
這個設(shè)置 probeType 為 3 可以實時派發(fā)滾動事件和位置參數(shù)

3.其他坑點待發(fā)現(xiàn)...歡迎大佬一起交流