vue_music:封装scroll.vue组件
2024-08-31 14:06:33
在项目中经常用到滚动，结合Better-scroll封装了sroll.vue组件
参考链接：https://ustbhuangyi.github.io...
http://www.imooc.com/article/...**better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略**。
1.html部分
这个很简单，有一个插槽slot**better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。**
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
2.功能
- 滚动特性props：是否截流滚动、是否派发事件、是否有数据传入
- 初始化Better-scroll
export default {
props: {
probeType: {
//有时候我们需要知道滚动的位置。
//当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后:截流）派发scroll 事件；
//当 probeType 为 2 的时候，会在屏幕滑动的过程中实时（不截流）的派发 scroll 事件；
//当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum（回弹） 滚动动画运行过程中实时派发 scroll 事件。
//如果没有设置该值，其默认值为 0，即不派发 scroll 事件
type: Number,
default: 1
},
click: {
//click是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，
//可以用event._constructed判断，为true,则是betterscroll派发的
type: Boolean,
defalut: true
},
data: {
//滚动的界面是否有了数据（这些数据多数是异步获取的）
//根据这个当有数据的时候refresh,在watch中有相关逻辑
type: Array,
default: null
},
listenScroll: {
//是否派发滚动位置
type: Boolean,
default: false
},
//实现上拉刷新
pullup: {
type: Boolean,
default: false
},
//实现下拉刷新
pulldown: {
type: Boolean,
default: false
},
//开始滚动的时候派发一个事件
beforeScroll: {
type: Boolean,
default: false
}
},
data() {
return {
}
},
mounted() {
setTimeout(() => {
this._initScroll() //初始化
}, 20)
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click
})
//派发滚动位置
if (this.listenScroll) {
let me = this
this.scroll.on('scroll', (pos) => {
//pos.y
//往上滑动负数，往下滑动正数
me.$emit('scroll', pos)
})
}
//上拉刷新，滚动到底部派发一个事件
if (this.pullup) {
this.scroll.on('scrollEnd', () => {
if(this.scroll.y <= (this.scroll.maxScrollY + 50)) {
this.$emit('scrllToEnd')
}
})
}
//是否派发顶部下拉事件，用于下拉刷新
if (this.pulldown) {
this.scroll.on('touchend', (pos) => {
//下拉动作
if (pos.y > 50) {
this.$emit('pulldown')
}
})
}
//开始滚动的时候派发一个事件
//比如，搜索下拉框，滚动下拉框的时候，派发开始滚动事件，从而收起键盘
if (this.beforeScroll) {
this.scroll.on('beforeScrollStart', () => {
this.$emit('beforeScroll')
})
}
},
enable() {
this.scroll && this.scroll.enable()
},
disable() {
this.scroll && this.scroll.disable()
},
refresh() {
this.scroll && this.scroll.refresh()
},
scrollTo() {
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch: {
data() {
setTimeout(() => {
this.refresh()
}, 20)
}
}
}
3.使用
在recommend.vue中使用
注：样式
//控制高度才能滚动
.recommend {
position: fixed;
width: 100%;
top: 88px;
bottom: 0;
}
.recommend-content {
height: 100%;
overflow: hidden;
}
原文地址：https://segmentfault.com/a/1190000016979411
最新文章
- 定制sqlmap tamper脚本
- The Lifecycle and Cascade of WeChat Social Messaging Groups-www2016-20160512
- tomcat架构
- Object学习笔记
- 六间房 去掉水印的方法 绕过游客VIP限制
- JavaScript Type Conversion
- 对C++/CLR的一些评价
- WCF - 实例与会话
- 如何在asp.net中如何在线播放各类视频文件
- jq模糊匹配
- udp 服务器界面监听
- yum安装man命令程序错误
- SQL SERVER数据库级的触发器
- CNPM
- Mysql 5.7 基于组复制(MySQL Group Replication) - 运维小结
- （记录合并）union和union all的区别
- dynamic遇上ADO.NET
- SqlServer 使用sys.dm_tran_locks处理死锁问题
- BootStrap中的button使用
- CI框架 -- 网页缓存