better-scroll 是什么
better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
滚动原理
<div class="wrapper">
<div class="content">
</div>
</div>
wrapper,也就是父容器,它会有固定的高度。 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是
better-scroll
的滚动原理。
使用场景
使用bette-scroll实现
点击回到底部
和上拉加载更多
和移动端滚动卡顿
在Vue中使用better-scroll
1、首先将better-scroll封装成一个单独的组件。因为移动端一个项目中有很多地方需要
- 1、通过
npm install better-scroll --save
来安装 - 2、新建一个
better-scroll.vue
组件,在<template>
中写入下面的代码
<template>
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
wrapper 下面一定只能有一个标签 content,后面需要滚动的组件使用
slot
插入到content
下面
- 3、在
<script>
中先导入better-scroll
<script>
// 导入better-scroll
import BScroll from 'better-scroll'
export default {
name:'BetterScroll',
},
</script>
- 4、在
mounted
钩子函数中创建Scroll对象。需要使用$refs
来取到wrapper DOM对象,在created
中使用$refs
是取不到的
mounted(){
// 1.滚动效果 创建scroll对象
this.scroll = new BScroll(this.$refs.wrapper,{})
},
- 5、在better-scroll组件中配置一下新创建的scroll对象
因为我们要把这个组件封装起来, 所以probeType对应的值,我们需要从使用组件的地方传过来,所以需要props来实现
数据相关的代码
props:{
<!--接收父组件传递的参数-->
probeType:{
type:Number,
default:0
},
pullUpLoad:{
type:Boolean,
default:false
},
},
对象scroll相关的代码
this.scroll = new BScroll(this.$refs.wrapper,{
// 1、 probeType:监听滚动的位置;可选值:1、2、3;
probeType:this.probeType,
// 2、click:默认值:false
better-scroll 默认会阻止浏览器的原生 click 事件。
当设置为 true,better-scroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 _constructed,值为 true。
click: true,
//3、pullUpLoad:默认值:false
如果需要监听滚动底部事件,设置为true
pullUpLoad:this.pullUpLoad
})
使用scroll对象自带的方法
mounted(){
// 1.滚动效果 创建scroll对象
this.scroll = new BScroll(this.$refs.wrapper,{
probeType:this.probeType,
click: true,
pullUpLoad:this.pullUpLoad
})
//2. 实时监听滚动,来实现返回顶部按钮的功能
this.scroll.on('scroll',(position)=>{
// 将监听的数据坐标发射出去,父组件用来接收处理
this.$emit('scroll',position)
})
// 3.实现加载更多 监听上拉事件
this.scroll.on('pullingUp',()=>{
//当滚动到底部的时候调用。
console.log("底部到了")
this.$emit('pullingUp')
})
}
- 6.封装完成;后续需要新的scroll自带的方法,我们直接在better-scroll中添加
2、在HOME组件中使用封装好的Better-Scroll组件
- 1、导入封装好的组件
import BetterScroll from '@/components/common/BetterScroll/BetterScroll'
- 2、注册一下
components: {
BetterScroll
}
- 3、将需要滚动优化的组件放入better-scroll中
列入首页我有封装好的商品列表 我需要将
GoodList
组件放入到better-scroll
中
<Better-scroll class="content"
:probeType="3"//监听滚动的方式
:pullUpLoad="true"//是否使用滚动到底部的监听方法
ref="scroll"
@scroll="scroll"//接受封装的组件中发射出来的实时滚动坐标
@pullingUp="loadmore"////接受封装的组件中发射出来的pullingUp方法。用于监听滚到底部、
>
// 需要滚动的组件(可放入多个)
<Goods-list ></Goods-list>
</Better-scroll>
因为使用better-scroll,我们需要设置一个可滚动区域,所以我们需要给封装的组件加一个content
在home组件中配置使用better-scroll需要的css
- 1、先给home组件div设置css
<template>
<div id="home">
<Better-scroll class="content">
<goodlist></goodlist>
</Better-scroll>
</div>
#home{
height:100vh;
position: relative;
}
- 2、给better-scroll组件设置css,参照下图和代码;设置可滚动区域
.content{
overflow: hidden;
position:absolute;
top:44px;
bottom:49px;
left:0;
right:0;
}
这样就能设置准确可滚动区域的大小了。这个时候在移动端滚动就不会出现卡顿了。
3、实现回到顶部按钮效果
1.先控制按钮的显示隐藏,我们需要在滚动到一定的距离后才展示回到顶部按钮。
创建一个backtop组件,backtop组件不需要滚动,所以就不用放到better-scroll组件中
- 1、创建一个返回顶部按钮的组件
<template>
<div class="back-top" @click="backtopclick">
<img src="~assets/img/common/top.png">
</div>
</template>
<script>
export default {
name:'BackTop',
methods:{
backtopclick(){
}
}
}
</script>
<style scoped>
.back-top{
position: fixed;
right: 10px;
bottom: 60px;
}
.back-top img{
width: 43px;
}
</style>
在home中使用backtop组件(引入、注册就不贴代码了)
<Back-top @click.native="backclick" v-show="backtop"></Back-top>
data(){
return {
//默认隐藏
backtop:false,
}
}
按钮显示状态,应该是滚动到一定的位置后将backtop设置为true,用better-scroll中传递过来的scroll方法,(既scroll自带的 this.scroll.on实时监听事件)
scroll(position){
// 1.返回顶部的实现
//position.y是scroll中实时监听的y坐标;(为负值)
//当y滚动到1000的时候,就将this.backtop为true
this.backtop = -position.y>1000
},
以上就是展示backtop按钮展示隐藏的实现
2.点击按钮返回顶部的实现
需要先监听按钮组件的点击事件
backclick()
<Back-top @click.native="backclick" v-show="backtop"></Back-top>
在methods中定义一下
backclick()
backclick(){
// this.$refs.scroll选中scroll组件来使用里面的scrollTo方法
(x坐标,y坐标,时间)
this.$refs.scroll.scroll.scrollTo(0,0,500)
},
到这里就已经将点击按钮返回顶部的需求实现了
4、接下来实现上拉加载更多
1、先监听滚动到底部。
在上面的代码中已经在scroll组件中定义好了事件(上面的组件代码中,已经将代码加进去了)
// 3.实现加载更多 监听上拉事件
this.scroll.on('pullingUp',()=>{
this.$emit('pullingUp')
})
在home组件中引用better-scroll组件里 加入
@pullingUp="loadmore"
<Better-scroll class="content" @pullingUp="loadmore" >
</ Better-scroll>
2、定义loadmore
在better-scroll中监听滚到底部的事件,只能调用一次。当你第一次滚到底部后,将调用一下
loadmore
,当你再一次滚到底部的时候,将不会监听滚到底部。所以在loadmore中,我们需要用一下scroll自带的finishPullUp()
方法,这样就不会只调用一次pullingUp
loadmore(){
//1.当滚到底部后,请求下一页的商品数据
(getHomeGoods是我项目里面跳用商品数据的方法)
this.getHomeGoods(this.cutype)
this.$refs.scroll.scroll.finishPullUp()
this.$refs.scroll.refresh()
},
在我们滚到底部以后,将会调用
loadmore
,再一次请求商品数据,这时需要滚动的区域就变高了,但是better-scroll没有进行重新一次计算高度,所以我们在loadmore中,请求完成数据后,将调用一下scroll对象的refresh方法,进行重新计算高度
到这里 上拉加载更多的功能就已经完成了。