在vue中封装betterscroll+解决betterscroll封装使用后在浏览器可以滚动但发布到手机上却不能滚动的问题

最新推荐文章于 2023-10-13 16:01:22 发布

原创

最新推荐文章于 2023-10-13 16:01:22 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

本文介绍了如何在Vue中封装BetterScroll组件，并解决了封装后在浏览器中能滚动但在手机上无法滚动的问题。主要关注点包括组件的创建、使用，以及针对不同设备的滚动兼容性调整和调试方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果对于betterscroll插件还不了解的可以参考BetterScroll：可能是目前最好用的移动端滚动插件

在vue中使用betterscroll、betterscroll的滚动原理以及scroll组件的封装可参考当 better-scroll 遇见 Vue

一、在vue中封装betterscroll

1、创建一个scroll.vue

2、在父组件中使用scroll

二、出现浏览器滚动但手机上不能滚动的问题

由于网上对于vue中关于betterscroll的使用没有经过封装而是直接使用的，这里使用better-scroll在vue中封装自己的scroll组件

一、在vue中封装betterscroll

1、创建一个scroll.vue

<template>
<!-- 为了初始化滚动条，需要定义一个ref -->
  <div ref="wrapper">
      <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll' //安装后，引入better-scroll
  export default {
    props: {
      probeType: { //是better-scroll的监听属性，设置快速滚动还是缓慢滚动
        type: Number,
        default: 1
      },
      click: { //是否点击事件
        type: Boolean,
        default: true
      },
      dataArray: { //需要传一个数据进来，因为当数据发生改变时，滚动条也需要refresh刷新，否则当数据改变时，不去刷新滚动条的话，可能就滚不动了
        type: Array,
        default: n