基于better-scroll的vue滾動組件

xiaotianyi 發布于2019-08-23 18:09 / 1084人閱讀

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

寫在前面

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

滾動組件代碼

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

使用scroll組件 縱向滾動


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

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

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

橫向滾動


// 樣式

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

踩過的坑點

1.純靜態頁面的滾動

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

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

2.scroll容器數據變化導致無法正常滾動, 可能情況是:

- 初始化的時候就有問題,去檢查一下第一個子元素高度||寬度是否是由其子元素撐開的

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

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

3.其他坑點待發現...歡迎大佬一起交流

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104749.html

Vue2.0開發仿豆瓣電影WebApp

摘要：從之前黃軼老師的高仿外賣開始接觸過這個滾動庫，感覺體驗感很好，用起來也比較順手，所以在后來的項目聯系中就一直在使用。前言雖然在此之前已經有類似的仿豆瓣電影的webapp,但或是開發的有些簡潔功能不太完善，或是體驗感覺得可以再完善下，所以自己摸索著對比豆瓣和豆瓣電影兩款app做了一下，初步滿足了自己的想法，經過幾次完善基本不會出現bug，如果發現存在問題請告訴我修改，謝謝！ 2017...

gplane 2019-08-20 18:14 評論0 收藏0
vue 在移動端體驗上的優化解決方案

摘要：去年年底自己搭了一個在移動端的開發框架，感覺體驗不是很好。路由懶加載首頁終于寫完了，以上這些就是我在移動端體驗優化的實戰。去年年底自己搭了一個vue在移動端的開發框架，感覺體驗不是很好。上個星期又要做移動端的項目了。所以我花了兩天時間對之前的那個開發框架做了以下優化自定義vuex-plugins-loading 路由切換動畫 + keep alive 動態管理緩存組件 better-sc...

godlong_X 2019-05-22 11:25 評論0 收藏0
基于Vue.js的音樂播放器（Webapp）

摘要：概述項目是基于，成品是一個移動端的音樂播放器，來源于的實戰課程。播放器是全局組件，放在下面，通過傳遞數據，觸發提交，從而使播放器開始工作。將請求的數據格式化后再通過傳遞，組件間共享，實現歌曲的播放切換等。概述項目是基于Vue.js，成品是一個移動端的音樂播放器，來源于imooc的實戰課程。自己動手實踐并加以修改拓展。項目的大致流程是Vue-cli構建開發環境，分析需求，設計構思，規...

widuu 2019-08-20 18:23 評論0 收藏0
vue全家桶制作一個精致的美團項目

摘要：的組件化功能可謂是它的一大亮點，通過將頁面上某一組件的代碼放入一個的文件中進行管理可以大大提高代碼的維護性。項目中未做移動端適配，在不同屏幕手機上打開，可能用戶體驗會差些一、項目展示： showImg(https://user-gold-cdn.xitu.io/2018/5/18/1637183ad14a696a?w=372&h=791&f=gif&s=2408442); 注意：如果...

NeverSayNever 2019-08-23 14:00 評論0 收藏0