vue使用better-scroll

最新推荐文章于 2024-05-12 21:30:34 发布

wding914

最新推荐文章于 2024-05-12 21:30:34 发布

阅读量101

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wding914/article/details/103560764

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 安装

npm install--save better-scroll

2.引入（页面）

import BScroll from 'better-scroll'

3.template

1.子元素height > 父元素，才能滚动

2.父元素 height 固定（100%），overflow：hidden

3.父元素 ref

4.better-scroll只作用在第一个子元素上 class=‘wrapper’

<div class="home" ref="home">
 <div class="wrapper">
      <p>1.djjdgkfkjfdklv</p>
      <p>2.djjdgkfkjfdklv</p>
        ...
      <p>10.djjdgkfkjfdk</p>
      <p>11.djjdgkfkjfdk</p>
    </div>
  </div>

4.初始化加载better-scroll

mounted/created中
mounted（）{
   this.$nextTick(()=>{
   //获取更新后的dom值（this.$refs）
       this.scroll = new BScroll(this.$refs.home,{
           click：true
       })
   })
}