TypeScript之Better-Scoll 記錄

傳送 better-scroll官網

安裝

// 歷史版本TypeScript中import會不兼容，所以需要使用新版本
npm install @better-scroll/core@next --save

使用示例

// HTML
<div id="topMenu" class="top_menu">
    <div ref="topMenuRoot">
      <div class="menu_item" v-for="(item, index) in 4" :key="index">{{ item }}</div>
    </div>
</div>

// TS
<script lang="ts">
import { Vue } from "vue-property-decorator";
import BScroll from "@better-scroll/core";

export default class Home extends Vue {
  _initScroll() {
    // 水平滑動需要設置
    (this.$refs.topMenuRoot as HTMLDivElement).style.width = `460px`;

    this.$nextTick(() => {
      new BScroll('#topMenu', {
        startX: 0,
        scrollX: true,
        scrollY: false,
        click: false
      });
    });
  }

  created() {
    this.$nextTick(() => {
      this._initScroll();
    })
  }
}
</script>

// Less
// 注意父容器的寬度必須設置
// 我這邊設置的寬度是 100%
記錄，祝好！
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容