vue移动端better-scroll简单应用

最新推荐文章于 2025-10-11 18:42:22 发布

原创最新推荐文章于 2025-10-11 18:42:22 发布 · 782 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了better-scroll页面滚动插件的使用方法，包括安装、导入、实例化等步骤，并提供了具体的代码示例。better-scroll是iscroll的封装，使用更友好。

页面滚动插件：better-scroll （是iscroll的一个封装，但使用比iscroll友好）
1.git文档：https://github.com/ustbhuangyi/better-scroll.git
2.安装 npm install better-scroll --save
3.生命周期函数mounted中实例化Bscroll
4.导入文件

import BScroll from 'better-scroll'

5.生命周期函数mounted中实例化Bscroll
JavaScript

 mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  },
  updated () {
    if (this.scroll) this.scroll.refresh()
  }

html-----------------

<div class="list" ref="wrapper">
    <div>
    	此处为代码你
    	div的高度要大于.list的高度
   </div>
</div>

css-----------------

.list
    overflow hidden
    position absolute
    top 1.46rem
    bottom 0
    width 100%
    left 0