vue之better-scroll詳解及封裝

better-scroll詳解，包括opetion參數，better-scroll使用，better-scroll原理，better-scroll萬能封裝，better-scroll相關事件，better-scroll相關函數，注意事項

　　在我們的h5或移動端網頁開發中，常常會需要實作滾動加載資料，等需求，而在開發中原生開發往往會帶來意想不到的問題，是以我們引入better-scroll來幫我們實作流暢的滾動效果。

什麼是better-scroll

better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫，它和 iscroll 的主要差別在這裡。better-scroll 也很強大，不僅可以做普通的滾動清單，還可以做輪播圖、picker 等等。

better-scroll原理

　　先看代碼及圖檔

<div class="wrapper" style='height:300px;'>
  <ul class="content">                          
    <li>ul被li标簽自動撐開，高度不固定</li>
    <li>...</li>
    ...
  </ul>
</div>

　　當頁面内容的高度超過視口高度的時候，會出現縱向滾動條；當頁面内容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當我們的視口展示不下内容的時候，會通過滾動條的方式讓使用者滾動螢幕看到剩餘的内容。

better-scroll代碼基本介紹

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})

　　首先：引入better-scroll第三方元件

　　其次：擷取滾動區域父級Dom元素（固定高度的元素）

　　最後：執行個體化better-scroll（參數說明：參數1--dom元素，參數2：相關配置）

vue中的better-scroll

　　首先看代碼

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    mounted() {
      this.$nextTick(() => {
　　　　　　//省略了擷取dom步驟，用this.$refs.wrapper擷取dom
        this.scroll = new Bscroll(this.$refs.wrapper, {})
      })
    }
  }
</script>

　　Vue.js 提供了擷取 DOM 對象的接口—— vm.$refs。通過了 this.$refs.wrapper通路到了這個 DOM 對象，this.$nextTick 的回調函數中初始化 better-scroll 。

　　this.$nextTick執行的 DOM 已經渲染了確定滾動正常。this.$nextTick 是一個異步函數，底層用到了 MutationObserver 或者是 setTimeout(fn, 0)。其實我們在這裡把 this.$nextTick 替換成 setTimeout(fn, 20) 也是可以的（20 ms 是一個經驗值，每一個 Tick 約為 17 ms）

better-scroll 元件的抽象和封裝

　　建立scroll.vue

<template>
  <div class="wrap" ref="wrapper">
   <slot>插槽</slot>
  </div>
</template>

<script >
import BScroll from "better-scroll";
export default {
  props: {
    /**
     * 1 滾動的時候會派發scroll事件，會截流。
     * 2 滾動的時候實時派發scroll事件，不會截流。
     * 3 除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件
     */
    probeType: {
      type: Number,
      default: 1,
    },
    /**
     * 點選清單是否派發click事件
     */
    click: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否開啟橫向滾動
     */
    scrollX: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否派發滾動事件
     */
    listenScroll: {
      type: Boolean,
      default: false,
    },
    /**
     * 清單的資料
     */
    data: {
      type: Array,
      default: null,
    },
    /**
     * 是否派發滾動到底部的事件，用于上拉加載
     */
    pullup: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否派發頂部下拉的事件，用于下拉重新整理
     */
    pulldown: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否派發清單滾動開始的事件
     */
    beforeScroll: {
      type: Boolean,
      default: false,
    },
    /**
     * 當資料更新後，重新整理scroll的延時。
     */
    refreshDelay: {
      type: Number,
      default: 20,
    },
  },
  mounted() {
    // 保證在DOM渲染完畢後初始化better-scroll
    setTimeout(() => {
      this.initScroll();
    }, 20);
  },

watch: {
    // 監聽資料的變化，延時refreshDelay時間後調用refresh方法重新計算，保證滾動效果正常
    data() {
      setTimeout(() => {
        this.refresh();
      }, this.refreshDelay);
    },
  },

methods: { initScroll() { if (!this.$refs.wrapper) { return; } // better-scroll的初始化 this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, scrollX: this.scrollX, }); // 是否派發滾動事件 if (this.listenScroll) { this.scroll.on("scroll", (pos) => { this.$emit("scroll", pos); }); } // 是否派發滾動到底部事件，用于上拉加載 if (this.pullup) { this.scroll.on("scrollEnd", () => { // 滾動到底部 if (this.scroll.y <= this.scroll.maxScrollY + 50) { this.$emit("scrollToEnd"); } }); } // 是否派發頂部下拉事件，用于下拉重新整理 if (this.pulldown) { this.scroll.on("touchEnd", (pos) => { // 下拉動作 if (pos.y > 50) { this.$emit("pulldown"); } }); } // 是否派發清單滾動開始的事件 if (this.beforeScroll) { this.scroll.on("beforeScrollStart", () => { this.$emit("beforeScroll"); }); } }, disable() { // 代理better-scroll的disable方法 this.scroll && this.scroll.disable(); }, enable() { // 代理better-scroll的enable方法 this.scroll && this.scroll.enable(); }, refresh() { // 代理better-scroll的refresh方法 this.scroll && this.scroll.refresh(); }, scrollTo() { // 代理better-scroll的scrollTo方法 this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments); }, scrollToElement() { // 代理better-scroll的scrollToElement方法 this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments); }, },
  destroyed(){
     this.scroll.destroy()
  },
};
</script>

<style lang='scss' scoped>
</style>

建立index.vue簡單去使用他（參數pullup 開啟向上滑動）

<template>
  <!-- 封裝better-scroll -->
  <Better class="wrapper" :data="data" :pullup="pullup" @scrollToEnd="loadData">
    <ul class="content">
      <li v-for="(item, i) in data" :key="i">{{ item.name }}</li>
    </ul>
  </Better>
</template>
<script>
import Better from "./BetterScrollss";
import { mapState } from "vuex";
export default {
  components: {
    Better,
  },
  data() {
    return {
      data: [],
      pullup: true,
      params: {
        city_id: 0,
        page: 2,
      },
    };
  },
  created() {
    this.loadData();
  },
  computed: {
    ...mapState("index", ["listData", "page"]),
  },
  watch: {
    listData(value) {
      this.params.page = this.page + 1;
      this.data = this.data.concat(value);
    },
  },
  methods: {
    loadData() {
      //請求資料
      this.$store.dispatch("index/requeListData", this.params);
    },
  },
};
</script>
<style lang='scss' scoped>
.content li {
  background: olivedrab;
  margin: 10px;
  height: 50px;
}
.wrap {
  margin-top: 100px;
  height: 250px;
  overflow: hidden;
  background: pink;
}
</style>

實作效果

better-scroll相關參數

　　格式：let scroll= new BScroll(object,{[option1,],.,.});

　　注意，如果在某一個元件内建立了一個BScroll的執行個體，在元件生命周期結束前要注意調用destroy方法，否則在滑動過程中切換頁面會導緻一直觸發scroll事件，導緻一些意想不到的問題，切記！！！(this.scroll.destroy())

option參數

startX: 開始的X軸位置
startY: 開始的Y軸位置
scrollY: true 滾動方向為 Y 軸
scrollX: true 滾動方向為 X 軸
click: true 是否派發click事件，通常判斷浏覽器派發的click還是betterscroll派發的click，可以用_constructed，若是bs派發的則為true
directionLockThreshold: 5
momentum: true 當快速滑動時是否開啟滑動慣性
bounce: true 是否啟用回彈動畫效果
selectedIndex: wheel 為 true 時有效，表示被選中的 wheel 索引
rotate: 25 wheel 為 true 時有效，表示被選中的 wheel 每一層的旋轉角度
wheel: false 該屬性是給 picker 元件使用的，普通的清單滾動不需要配置
snap: false 該屬性是給 slider 元件使用的，普通的清單滾動不需要配置
snapLoop: false 是否可以無縫循環輪播
snapThreshold: 0.1 用手指滑動時頁面可切換的門檻值，大于這個門檻值可以滑動的下一頁
snapSpeed: 400 , 輪播圖切換的動畫時間
swipeTime: 2500 swipe 持續時間
bounceTime: 700 彈力動畫持續的毫秒數
adjustTime: 400 wheel 為 true 有用，調整停留位置的時間
swipeBounceTime: 1200 swipe 回彈時間
deceleration: 0.001 滾動動量減速越大越快，建議不大于0.01
momentumLimitTime: 300 符合慣性拖動的最大時間
momentumLimitDistance: 15 符合慣性拖動的最小拖動距離
resizePolling: 60 重新調整視窗大小時，重新計算better-scroll的時間間隔
preventDefault: true 是否阻止預設事件
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止預設事件
HWCompositing: true 是否啟用硬體加速
useTransition: true 是否使用CSS3的Transition屬性
useTransform: true 是否使用CSS3的Transform屬性
probeType: 1 滾動的時候會派發scroll事件，會截流。 2 滾動的時候實時派發scroll事件，不會截流。 3 除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件

event事件

beforeScrollStart - 滾動開始之前觸發
scrollStart - 滾動開始時觸發
scroll - 滾動時觸發
scrollCancel - 取消滾動時觸發
scrollEnd - 滾動結束時觸發
touchend - 手指移開螢幕時觸發
flick - 觸發了 fastclick 時的回調函數
refresh - 當 better-scroll 重新整理時觸發
destroy - 銷毀 better-scroll 執行個體時觸發

舉例：
let scroll = new BScroll(document.getElementById('wrapper'),{
   probeType: 3
})
 
scroll.on('scroll', (pos) => {
  console.log(pos.x + '~' + pos.y)
})

vue之better-scroll詳解及封裝

什麼是better-scroll

better-scroll原理

better-scroll代碼基本介紹

vue中的better-scroll

better-scroll 元件的抽象和封裝

better-scroll相關參數

option參數

相關函數

繼續閱讀

Confluence & Jira & Bitbucket

php使用webuploader前後端代碼分享

Jenkins 內建 DingTalk 插件實作項目建構狀态釘釘消息推送

ChatGPT的插件功能可以使用了，今天迫不及待的試了下。可以選擇很多插件，我測試了下谷歌郵件，可以幫我分析郵件和發送郵

WordPress 多表情文章投票/心情評價插件 DW Reactions

總算是把主存儲從威聯通遷移到自建的NAS上了，期間的驗證和一些破壞性測試也通過了，後續添加硬碟也很友善，故障盤大于校驗盤

卷積神經網絡是什麼，它與小鼠胚胎在顯微鏡下呈現的圖像之間有哪些聯系？多種基因突變影響生物體發育過程中的細胞增殖，導緻結

有什麼好方法可以借助浏覽器插件使用ChatGPT嗎？今天的AI小技巧小編就幫大家解決這個問題一起來學習吧！#chatgp

vue wangeditor配置

XCode安裝插件無效的解決辦法

Stable Diffusion webui插件使用中遇到的問題及解決思路整理

輪播圖插件swiper歡迎使用Markdown編輯器

在Vue中使用swiper輪播圖插件第一步安裝包:第二步建立子產品:第三步執行子產品:第四步使用:

【Win11Copilot智能助理将支援第三方AI插件】AI奇點網7月31日報道丨AI奇點網從外媒處了解到，目前第一批内

idea熱部署1.war和exploed2.tomcat的設定3.jrebel 插件使用的注意事項

PDF.js的使用