vue中使用better-scroll实现滑动效果

Posted 2020-11-16 downrain

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>