Better-Scroll的简单使用-上拉加载更多-回到顶部

8,074 阅读3分钟

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方法,进行重新计算高度

到这里 上拉加载更多的功能就已经完成了。