BetterScroll2.0在Vue中的基本使用
Vue 使用 基本
2023-06-13 09:15:55 时间
首先在你的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()
})
}
}
相关文章
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- 使用 vue 创建你的第一个 PWA 应用
- vue怎么使用layui_layui动态添加输入框
- vue中的几个高级概念
- highcharts移动端使用-支持vue-支持横向滚动-代码封装
- vue 组件插槽_vue插槽的使用
- vue中使用wangeditor_vue富文本编辑器tinymce
- Vue调试工具安装(vue devtools)
- vue-awesome-swiper的用法&同一页面有多个swiper如何使用
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- Vue源码之虚拟DOM和diff算法(一)使用snabbdom
- 在vue cli3.0 里面下载less,下载成功了还是提示没有 需要下载
- vue.js客服系统实时聊天项目开发(十九)使用正则将消息格式替换为产品卡片信息
- (十二)使用 Vue Devtools
- Vue3学习笔记Day2 项目工程化的第一步,第一个Vue项目
- Vue.js 中异常高效可用的 .sync 修饰符
- Vue取消eslint语法限制
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue实时监测Redis变化(vue监控redis变化)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 构建基于Vue与Redis的高性能缓存系统(VUE redis缓存)