vue中使用better-scroll遇到的问题

最新推荐文章于 2024-04-25 15:24:36 发布

qianduan1020

最新推荐文章于 2024-04-25 15:24:36 发布

阅读量838

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： better-scroll使用出现的问题

本文链接：https://blog.youkuaiyun.com/qianduan1020/article/details/102686535

vue 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍如何在项目中安装并使用 Better Scroll 滚动插件，包括初始化配置、常见方法如 scrollToElement 和 on 事件绑定的使用，以及如何在界面加载完成后正确实例化。

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

安装及引入

npm i better-scroll
import BScroll from 'better-scroll'

初始化

// <div class="wrapper">
//   <ul class="content">
//     <li>...</li>
//     <li>...</li>
//     ...
//   </ul>
//   <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
// </div>
// wrapper是ul标签的父标签类名
let scroll = new BScroll('.wrapper')

如果初始化代码在computed中使用，特别需要注意2点：

//1.避免重复初始化
if(!this.scroll){
  this.scroll=new BScroll('.list-content',{
    click:true
  })
}
// 如果涉及到数据所在的标签隐藏或显示 调用下面else 否则忽略
else{
//作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
  this.scroll.refresh()
}
// 2.在界面加载完后实例化 需要用$nextTick()
this.$nextTick(()=>{
  if(!this.scroll){
    this.scroll=new BScroll('.list-content',{
      click:true
    })
  }else{
    this.scroll.refresh()
  }
})

better-scroll滑动插件常用的方法有scrollToElement，on，scrollTo等等

// 向上滑动300px,用时0.3s
this.scroll.scrollTo(0,-300,300)
// 绑定滑动事件，把滑动的距离保存到scrollY变量中
this.scroll.on("scroll", ({x, y}) => {
  this.scrollY = Math.abs(y);
});
// 滑动到元素li的位置，用时0.3s
this.scroll.scrollToElement(li,300)