vue之better-scroll详解及封装
在我们的h5或移动端网页开发中,常常会需要实现滚动加载数据,等需求,而在开发中原生开发往往会带来意想不到的问题,因此我们引入better-scroll来帮我们实现流畅的滚动效果。
什么是better-scroll
better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。
better-scroll原理
先看代码及图片
<div class="wrapper" style='height:300px;'> <ul class="content"> <li>ul被li标签自动撑开,高度不固定</li> <li>...</li> ... </ul> </div>
当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
better-scroll代码基本介绍
import BScroll from 'better-scroll' let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper, {})
首先 :引入better-scroll第三方组件
其次:获取滚动区域父级Dom元素(固定高度的元素)
最后:实例化better-scroll(参数说明:参数1–dom元素 , 参数2:相关配置)
vue中的better-scroll
首先看代码
<template> <div class="wrapper" ref="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div> </template> <script> import BScroll from 'better-scroll' export default { mounted() { this.$nextTick(() => {
//省略了获取dom步骤,用this.$refs.wrapper获取dom this.scroll = new Bscroll(this.$refs.wrapper, {}) }) } } </script>
Vue.js 提供了获取 DOM 对象的接口—— vm.$refs。通过了 this.$refs.wrapper访问到了这个 DOM 对象,this.$nextTick 的回调函数中初始化 better-scroll 。
this.$nextTick执行的 DOM 已经渲染了确保滚动正常。this.$nextTick 是一个异步函数,底层用到了 MutationObserver 或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的(20 ms 是一个经验值,每一个 Tick 约为 17 ms)
better-scroll 组件的抽象和封装
新建scroll.vue
<template> <div class="wrap" ref="wrapper"> <slot>mm</slot> </div> </template> <script > import BScroll from "better-scroll"; export default { props: { /** * 1 滚动的时候会派发scroll事件,会截流。 * 2 滚动的时候实时派发scroll事件,不会截流。 * 3 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件 */ probeType: { type: Number, default: 1, }, /** * 点击列表是否派发click事件 */ click: { type: Boolean, default: true, }, /** * 是否开启横向滚动 */ scrollX: { type: Boolean, default: false, }, /** * 是否派发滚动事件 */ listenScroll: { type: Boolean, default: false, }, /** * 列表的数据 */ data: { type: Array, default: null, }, /** * 是否派发滚动到底部的事件,用于上拉加载 */ pullup: { type: Boolean, default: false, }, /** * 是否派发顶部下拉的事件,用于下拉刷新 */ pulldown: { type: Boolean, default: false, }, /** * 是否派发列表滚动开始的事件 */ beforeScroll: { type: Boolean, default: false, }, /** * 当数据更新后,刷新scroll的延时。 */ refreshDelay: { type: Number, default: 20, }, }, mounted() { // 保证在DOM渲染完毕后初始化better-scroll this.$nextTick(()=>{ this.initScroll(); }) setTimeout(() => { }, 20); }, methods: { initScroll() { if (!this.$refs.wrapper) { return; } // better-scroll的初始化 this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, scrollX: this.scrollX, }); // 是否派发滚动事件 if (this.listenScroll) { this.scroll.on("scroll", (pos) => { this.$emit("scroll", pos); }); } // 是否派发滚动到底部事件,用于上拉加载 if (this.pullup) { this.scroll.on("scrollEnd", () => { // 滚动到底部 if (this.scroll.y <= this.scroll.maxScrollY + 50) { this.$emit("scrollToEnd"); } }); } // 是否派发顶部下拉事件,用于下拉刷新 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"); }); } }, disable() { // 代理better-scroll的disable方法 this.scroll && this.scroll.disable(); }, enable() { // 代理better-scroll的enable方法 this.scroll && this.scroll.enable(); }, refresh() { // 代理better-scroll的refresh方法 this.scroll && this.scroll.refresh(); }, scrollTo() { // 代理better-scroll的scrollTo方法 this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments); }, scrollToElement() { // 代理better-scroll的scrollToElement方法 this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments); }, }, destroyed(){ this.scroll.destroy() }, watch: { // 监听数据的变化,延时refreshDelay时间后调用refresh方法重新计算,保证滚动效果正常 data() { setTimeout(() => { this.refresh(); }, this.refreshDelay); }, }, }; </script> <style lang='scss' scoped> </style>
新建index.vue简单去使用他 (参数pullup 开启向上滑动)
<template> <!-- 封装better-scroll --> <Better class="wrapper" :data="data" :pullup="pullup" @scrollToEnd="loadData"> <ul class="content"> <li v-for="(item, i) in data" :key="i">{{ item.name }}</li> </ul> </Better> </template> <script> import Better from "./BetterScrollss"; import { mapState } from "vuex"; export default { components: { Better, }, data() { return { data: [], pullup: true, params: { city_id: 0, page: 2, }, }; }, created() { this.loadData(); }, computed: { ...mapState("index", ["listData", "page"]), }, watch: { listData(value) { this.params.page = this.page + 1; this.data = this.data.concat(value); }, }, methods: { loadData() { //请求数据 this.$store.dispatch("index/requeListData", this.params); }, }, }; </script> <style lang='scss' scoped> .content li { background: olivedrab; margin: 10px; height: 50px; } .wrap { margin-top: 100px; height: 250px; overflow: hidden; background: pink; } </style>
实现效果
better-scroll相关参数
格式:let scroll= new BScroll(object,{[option1,],.,.});
注意,如果在某一个组件内创建了一个BScroll的实例,在组件生命周期结束前要注意调用destroy方法,否则在滑动过程中切换页面会导致一直触发scroll事件,导致一些意想不到的问题,切记!!!(this.scroll.destroy())
option参数
- startX:
0
开始的X轴位置 - startY:
0
开始的Y轴位置 - scrollY:
true
滚动方向为 Y 轴 - scrollX: true 滚动方向为 X 轴
- click:
true
是否派发click事件,通常判断浏览器派发的click还是betterscroll派发的click,可以用_constructed,若是bs派发的则为true - directionLockThreshold:
5
- momentum:
true
当快速滑动时是否开启滑动惯性 - bounce:
true
是否启用回弹动画效果 - selectedIndex:
0
wheel 为 true 时有效,表示被选中的 wheel 索引 - rotate:
25
wheel 为 true 时有效,表示被选中的 wheel 每一层的旋转角度 - wheel:
false
该属性是给 picker 组件使用的,普通的列表滚动不需要配置 - snap:
false
该属性是给 slider 组件使用的,普通的列表滚动不需要配置 - snapLoop:
false
是否可以无缝循环轮播 - snapThreshold:
0.1
用手指滑动时页面可切换的阈值,大于这个阈值可以滑动的下一页 - snapSpeed:
400
, 轮播图切换的动画时间 - swipeTime:
2500
swipe 持续时间 - bounceTime:
700
弹力动画持续的毫秒数 - adjustTime:
400
wheel 为 true 有用,调整停留位置的时间 - swipeBounceTime:
1200
swipe 回弹 时间 - deceleration:
0.001
滚动动量减速越大越快,建议不大于0.01 - momentumLimitTime:
300
符合惯性拖动的最大时间 - momentumLimitDistance:
15
符合惯性拖动的最小拖动距离 - resizePolling:
60
重新调整窗口大小时,重新计算better-scroll的时间间隔 - preventDefault:
true
是否阻止默认事件 - preventDefaultException:
{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }
阻止默认事件 - HWCompositing:
true
是否启用硬件加速 - useTransition:
true
是否使用CSS3的Transition属性 - useTransform:
true
是否使用CSS3的Transform属性 - probeType:
1
滚动的时候会派发scroll事件,会截流。2
滚动的时候实时派发scroll事件,不会截流。3
除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件
event事件
- beforeScrollStart – 滚动开始之前触发
- scrollStart – 滚动开始时触发
- scroll – 滚动时触发
- scrollCancel – 取消滚动时触发
- scrollEnd – 滚动结束时触发
- touchend – 手指移开屏幕时触发
- flick – 触发了 fastclick 时的回调函数
- refresh – 当 better-scroll 刷新时触发
- destroy – 销毁 better-scroll 实例时触发
举例:
let scroll = new BScroll(document.getElementById('wrapper'),{
probeType: 3
})
scroll.on('scroll', (pos) => {
console.log(pos.x + '~' + pos.y)
})
相关函数
- scrollTo(x, y, time, easing) 滚动到某个位置,x,y 代表坐标,time 表示动画时间,easing 表示缓动函数 scroll.scrollTo(0, 500)
- scrollToElement(el, time, offsetX, offsetY, easing) 滚动到某个元素,el(必填)表示 dom 元素,time 表示动画时间,offsetX 和 offsetY 表示坐标偏移量,easing 表示缓动函数
- refresh() 强制 scroll 重新计算,当 better-scroll 中的元素发生变化的时候调用此方法
- getCurrentPage() snap 为 true 时,获取滚动的当前页,返回的对象结构为 {x, y, pageX, pageY},其中 x,y 代表滚动横向和纵向的位置;pageX,pageY 表示横向和纵向的页面索引。用法如:getCurrentPage().pageX
- goToPage(x, y, time, easing) snap 为 true,滚动到对应的页面,x 表示横向页面索引,y 表示纵向页面索引, time 表示动画,easing 表示缓动函数(可省略不写)
- enable() 启用 better-scroll,默认开启
- disable() 禁用 better-scroll
- destroy() 销毁 better-scroll,解绑事件