vue中使用better-scroll實現滑動效果

了解詳情 https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/events.html#pullingup

一、首先需要在項目中引入better-scroll

1. 在package.json 直接寫入 "better-scroll":"^1.11.1" 版本以github上為准（目前最新）
2. cpnm install 在node_modules 可以查看版本是否安裝（或者直接 cnpm i better-scroll -S）
3. 直接在你的組件里面寫入import BScroll from 'better-scroll';

二、better-scroll優點

1.體驗像原生：滾動非常流暢，而且沒有滾動條。

2.滾動位置固定：在vue中通過路由切換頁面時組件會自動滾動到頂部，需要監聽滾動行為才能讓滾動位置固定，better-scroll解決了這個問題。

三、實例

<template>
  <div>
    <h3>我是 classify 組件</h3>
	// 需要滑動的 區域 最外層 只能包含一個 標簽，即如下， div 里 只有 一個 ul 標簽
    <div class="wrapper"> 
      <ul>
        <li>我是第1</li>
       		、、、、、
        <li>我是第100</li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入 better-scroll
import BScroll from "better-scroll";

export default {
  data() {
    return {
      scroll: null
    };
  },
    // 需要在 mounted 這個 生命周期中 實現
  mounted() {
    this.scroll = new BScroll(".wrapper", {});
  }
};
</script>

<style scoped>
.wrapper {
    // 滑動的 區域
  height: 150px;
  background: skyblue;
}
</style>