vue项目笔记（16）-vue滚动插件better-scroll的使用

最新推荐文章于 2024-08-10 08:26:58 发布

CHH5431

最新推荐文章于 2024-08-10 08:26:58 发布

阅读量4.4k

点赞数

分类专栏： Vue 插件文章标签： better-scroll

本文链接：https://blog.csdn.net/qq_41115965/article/details/81603113

版权

Vue 同时被 2 个专栏收录

76 篇文章 8 订阅

订阅专栏

插件

4 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中如何使用better-scroll滚动插件。首先，需要安装better-scroll；接着，参照官方文档调整HTML结构；然后，在JS代码中进行相关设置，以实现页面元素的滚动效果。

摘要由CSDN通过智能技术生成

vue滚动插件better-scroll的使用

在移动端或APP中，我们经常遇到页面中的部分元素需要滚动的情况，这个时候我们就可能需要使用vue插件better-scroll，该插件的使用步骤如下：

1、安装better-scroll

npm install better-scroll --save

2、打开网址：https://github.com/ustbhuangyi/better-scroll，发现在使用better-scroll插件的时候，html结构需要符合以下的情况：

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling -->
</div>

3、在js代码中，需要做以下设置：

<script>
  import Bscroll from 'better-scroll' // 步骤一
  export default{
    name: 'CityList',
    mounted(){
      this.scroll = new Bscroll(this.$refs.wrapper); // 步骤二
    }
  }

4、此时对应的标签已经可以完成滚动了。