1 介绍
better scroll是一个用于滚动的第三方插件,主要用作移动端的页面滚动,具有基础滚动功能和下拉刷新、上拉加载和局部滚动等高级功能
1.1 安装
安装方式推荐直接npm安装,可以安装核心功能,其他功能作为插件安装,也可以选择全量安装
// 核心安装
npm install @better-scroll/core
// 全量安装
npm install better-scroll
1.2 引入
// 全量
import BetterScroll from 'better-scroll'
// 核心
import BScroll from '@better-scroll/core'
// or
var BScroll = require('@better-scroll/scroll')
1.3 使用
基本规则就是:wrapper
中为需要滚动的页面,在BScroll
的第一个参数中传递的就是该标签的引用,其下默认滚动第一个元素,也可以设置成其他元素。
基础滚动
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
// ...... 详见配置项
})
在vue中使用:
<template>
<div class="core-specified-content-container">
<div class="scroll-wrapper" ref="scroll">
<div class="ignore-content">
The Blue area is not taken as BetterScroll's content
</div>
<div class="scroll-content">
<div class="scroll-item" v-for="n in nums" :key="n">{{n}}</div>
</div>
</div>
</div>
</template>
在生命周期的mount
中:
mounted:{
init(){
window.bs = this.bs = new BScroll(this.$refs.scroll, {
specifiedIndexAsContent: 1,
probeType: 3
})
}
}
必须保证包裹容器大小为固定:
.scroll-wrapper {
height: 400px;
overflow: hidden;
border: 1px solid #42b983;
}
probeType
设置3为一直监听滚动,包括惯性滑动;设置为2只在点击滑动时监听滚动,不包括惯性滑动。入参为窗口左上角坐标。滚动的时候相当于窗口从页面顶部往下走。
specifiedIndexAsContent
为设置滚动元素,1表示内容中的第二个元素
注意:如果在滚动内容中存在默认无点击事件的标签,如div
,如果给其绑定点击事件,则触发不了,需要将BScroll的属性:click:true
这样设置才行
2 高级功能
2.1 上拉加载(触底加载)
该事件名称:pullingUp
,触发:底部上拉距离超过阈值
import BetterScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
BetterScroll.use(Pullup)
const bs = new BetterScroll('.wrapper', { // 第一个参数可以是一个类或者是选择器document.querySelector(选择)
pullUpLoad: true
})
bs.on('pullingUp', () => {
await fetchData()
bs.finishPullUp() // 该函数一调用就可以立即触发下一次,所以可以搞个延时setTimeout
})
2.2 下拉加载(顶部刷新)
该事件名称:pullingDown
,触发:顶部下拉距离超过阈值
import BetterScroll from '@better-scroll/core'
import Pulldown from '@better-scroll/pull-down'
BetterScroll.use(Pulldown)
const bs = new BetterScroll('.wrapper', {
pullDownRefresh: true
})
bs.on('pullingDown', () => {
await fetchData()
bs.finishPullDown() // 该函数一调用就可以立即触发下一次,所以可以搞个延时setTimeout
})
3 bug
3.1 滚动区域bug
在使用滚动组件时发现滚动区域未完全可滚动,滚动区域过小,原因是better scroll组件加载完成时会对目标子组件进行可滚动区域计算(保存在:scrollerHeight
),当当前元素为完全加载时(存在异步请求),可滚动区域是小于真是可滚动区域的
解决办法:重新计算可滚动区域大小:调用better scroll组件的:refresh()
方法
3.2 使用该滚动插件后sticky属性失效
由于插件是使用transform.translate方法来改变显示区域,所以,即使元素动态改成了fixed
,依然不会固定住!
这里建议使用相同的两个组件,当原组件到达顶部位置,则显示出新的组件,该组件和原组件状态做好同步,并放置好位置。要注意的是,在vue中获取元素方法:this.$refs.xxx.$el
。但是如果页面中有图片的话,由于图片是异步加载,所以可能此时获取到的高度是不准的,图片还没加载完成。