BetterScroll2.0在Vue中的基本使用
2023-02-18 16:30:15 时间
首先在你的vue项目中安装BetterScroll
npm install @better-scroll/core --save
在想要使用BetterScroll的文件中引入
import BScroll from '@better-scroll/core'
基本使用
<div class="content" ref="scroll">
<ul>
<li></li>
</ul>
</div>
需要给父容器设置固定高度
.content {
height: 200px;
background-color: blue;
overflow: hidden;
}
export default {
data() {
return() {
scroll: null
}
},
mounted() {
this.scroll = new BScroll('this.$refs.scroll', {
probeType: 3,
pullUpLoad: true
})
/*
* 监听滚动位置 需要配置probeType
* 默认值为0 不派发scroll事件
* 可选值 1|2|3
*/
this.scroll.on('scroll', (positon) => {
console.log(position);
})
/*
* 上拉加载刷新事件 配置项pullUpLoad
* 需要调用finishPullUp()方法结束上拉加载 才可以进行下一次上拉加载
*/
this.scroll.on('pullingUp', () => {
console.log('上拉加载刷新')
//手动结束上拉加载
this.scroll.finishPullUp()
})
}
}
相关文章
- Java常用类(2)- Object类
- Java常用类(1)- 内部类
- Java异常(3)- 自定义异常及经验小结
- Java异常(2)- 捕获和抛出异常
- Java异常(1)- Error和Exception
- 【Java难点攻克】「NIO和内存映射性能提升系列」彻底透析NIO底层的内存映射机制原理与Direct Memory的关系
- ☕【Java深层系列】「并发编程系列」深入分析和研究MappedByteBuffer的实现原理和开发指南
- ☕【Java深层系列】「并发编程系列」让我们一起探索一下CompletionService的技术原理和使用指南
- ☕【Java深层系列】「并发编程系列」让我们一起探索一下CountDownLatch的技术原理和源码分析
- ☕【Java深层系列】「并发编程系列」让我们一起探索一下CyclicBarrier的技术原理和源码分析
- ☕【Java实战系列】「技术盲区」Double与Float的坑与解决办法以及BigDecimal的取而代之!
- ☕【Java深层系列】「技术盲区」让我们一起去挑战一下如何读取一个较大或者超大的文件数据!
- 【分布式技术专题】「OSS中间件系列」Minio的文件服务的存储模型及整合Java客户端访问的实战指南
- ☕【Java深层系列】「技术盲区」让我们一起完全吃透针对于时间和日期相关的API指南
- 🏆【JVM深层系列】「云原生时代的Java虚拟机」针对于GraalVM的技术知识脉络的重塑和探究
- ☕【Java技术指南】「序列化系列」深入挖掘FST快速序列化压缩内存的利器的特性和原理
- 【Java技术专题】「性能优化系列」针对Java对象压缩及序列化技术的探索之路
- ☕【Java技术指南】「技术盲区」看看线程以及线程池的异常处理机制都有哪些?
- ☕【Java技术指南】「编译器专题」深入分析探究“静态编译器”(JAVA\IDEA\ECJ编译器)是否可以实现代码优化?
- ☕【Java技术指南】「JPA编程专题」让你不再对JPA技术中的“持久化型注解”感到陌生了!