Vue实战商城项目（四）—— better-scroll

---

前言

介绍：better-scroll是基于iscroll开发的插件，重点解决移动端（已支持 PC）各种滚动场景需求的插件，常用于移动端滚动的插件，iscroll目前已不再维护，better-scroll目前仍在持续更新中。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、better-scroll是什么？

better-scroll 是基于原生 JS 实现的，不依赖任何框架。
它编译后的代码大小是 63kb，压缩后是 35kb，zip 后仅有9kb，是一款非常轻量的 JS lib

二、原理

绿色部分为 wrapper，也就是父容器，它会有固定的高度
黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。

当 黄色部分的高度不超过父容器的高度，是不能滚动的，只有它超过了父容器的高度，就可以滚动了。

详情可见官网：官网

三、应用

1.安装

代码如下（示例）：

npm install better-scroll -S

2.引用封装

通常我们在使用better-scroll的时候，会对其进行一层封装，再拿来用在自己的项目中，这样便于维护。
哪天如果better-scroll不维护了，需要换别的插件这样就可以很方便替换。

代码如下（示例）：

<template>
    <div ref="wrapper">
      <div class="content">
        <slot></slot>
      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "Scroll",
      props:{
        probeType: {
          type: Number,
          default: 0
        },
        pullUpLoad: {
          type:Boolean,
          default: false
        }
        },
      data(){
          return{
            Scroll:null,

          }

        },

      mounted() {

          this.Scroll = new BScroll(this.$refs.wrapper,{
            click:true,
            probeType:this.probeType,
            pullUpLoad: this.pullUpLoad

          }),
            this.Scroll.on("scroll",(position)=>{
              this.$emit("scroll",position)
            }),
            this.Scroll.on("pullingUp",()=>{
              this.$emit("pullingUp")
            })
      },
      methods:{

          ScrollTo(x,y,time=500){
          this.Scroll &&  this.Scroll.scrollTo(x,y,time);
          },
        finishPullUp(){
          this.Scroll && this.Scroll.finishPullUp()
        },
        refresh(){
            this.Scroll && this.Scroll.refresh()
        }


      }
    }

</script>

<style scoped>

</style>

3.home组件中better-scroll的使用

封装好了之后，我们就可以直接使用了，组件取名为Scroll，需要给Scroll设置一个固定高度。

probe-type参数，默认为0不监听， 1同样不监听，2为手指滚动时监听手指不滑动则不监听，3为只要屏幕在滚动就监听。后续需要监听对应位置显示backTop返回顶部的组件，所以我们这里设置为3。

pullUpLoad参数默认为false，为true则表示打开上拉加载更多。

scroll为子组件传回来的位置信息（x轴和y轴的值）。

pullingUp则是回调上拉加载更多的函数（意思是告诉你子组件已经完成上拉加载更多这个动作了应该做什么回应干些什么事情，这个什么事情就是写在这个函数这里面的）。
代码如下（示例）：

     <scroll class="content"
             ref="scroll"
             :probe-type="3"
             @scroll="contentScroll"
             :pull-up-load="true"
             @pullingUp="loadMore">
    <home-swiper :banners="banners" @swiperImgLoad="swiperImgLoad"></home-swiper>
     <recommend-view :recommends="recommends"></recommend-view>
     <feature-view></feature-view>
     <tab-control ref="tabControl2"
                  :title="['流行','新款','精选']"
                  @tabClick="tabClick" ></tab-control>

      <goods-list :goods="goods[currentType].list"></goods-list>

     </scroll>

---

总结

以上是本文对于better-scroll的简单介绍，以及在本项目中的初步应用，后续会讲解如何实现上拉加载更多以及better-scroll需要我们解决的一些问题。