Vue 使用 better-scroll

首先，什么是 better-scroll ？它是用来干什么的？

better-scroll 是一个移动端 滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

那么，我们要在 vue 中如何使用它：

安装：

npm install @better-scroll/core --save

// or

yarn add @better-scroll/core

引入：

// 最基本的使用，你只需要在使用到的页面中引入即可
import BScroll from '@better-scroll/core'

使用：

// 如果你只是用来实现一个最基本的滚动列表，如
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
  // ...... see options
})

Demo:

// js
data() {
  return {
    scroll: ''
  };
},
methods: {
    // 滑动
    personScroll() {
      // $nextTick 是一个异步函数，为了确保 DOM 已经渲染
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.personWrap, {
            startX: 0, // 初始化水平方向的位置
            scrollX: true, // 设置为 true,将启用水平滚动
            scrollY: false, // 同scrollX
            // 要覆盖本机滚动，BetterScroll 必须禁止某些默认浏览器行为，例如鼠标单击。
            // 如果您希望您的应用程序响应单击事件，则必须将此选项显式设置为true
            click: true,
            // 忽略竖直方向的滚动
            // 保留原生垂直滚动，添加水平BetterScroll，将此设置为“vertical”
            // 则 BetterScroll 区域将仅对水平滑动做出反应。垂直滑动会自然滚动整个页面
            // 同理，当您想要保持自然的水平滚动时，将其设置为 “horizontal”
            eventPassthrough: "vertical"
          });
        } else {
          // refresh better-scroll API
          // 有个时候，滚动区域的内容并不是写死的，会发生变化，
          // 当DOM结构发生改变时应重新计算 BetterScroll 以确保滚动正常工作。
          this.scroll.refresh();
        }
      });
    }
},
created() {
  this.$nextTick(() => {
    // refresh better-scroll API
    // 有个时候，滚动区域的内容并不是写死的，会发生变化，
    // 当DOM结构发生改变时应重新计算 BetterScroll 以确保滚动正常工作。
    this.personScroll();
  })
},

<!-- DOM结构 -->
<div class="scroll-wrapper" ref="personWrap"><!-- BScroll构造函数传入的盒子元素 -->
    <ul class="scroll-content"><!-- 内层盒子元素，必须为inline-block -->
        <li v-for="item in freshRunList" :key="item.id" @click="toFreshRun(item)">
          <!-- 内容区 -->
        </li>
    </ul>
</div>

警告：BetterScroll 实现了水平滚动，对 CSS 要求更高。首先，您需要确保包装器不包装，并且内容的显示是内联块。

即编写 css 样式应注意：

.scroll-wrapper {
  // ...
  white-space nowrap;
}
.scroll-content {
  // ...
  display inline-block;
}

 

只有正确的配置css样式，才能保证 滚动 生效。

下来便开始编写你的 Better-scroll 吧。推荐大家  插件作者的文章 当 better-scroll 遇见 Vue。

不太懂的同学可以学习学习。

Better-scroll 官方文档。