better-scroll 1.13

简单入门示例：快速使用：

<template>
<div class="wrapper">
  <div class="content">
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'XScroll',
  // 不能在生命周期created时获取dom ，这时还没有加载完html
  mounted () {
    /* eslint-disable no-new */
    new BScroll(document.querySelector('.wrapper'))
    // 获取dom方式一
    // new BScroll(document.querySelector('.wrapper'))
    // 获取dom方式二
    // new BScroll(document.querySelector(this.$refs.foo))
  }
}
</script>

<style scoped>
.wrapper{
  height: 150px;
  border: 1px solid #42b983;
  overflow: hidden;
}
</style>

简单使用示例

常用方法包括上拉激活，和滚动事件，

<template>
  <div class="wrapper">
    <div class="content">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'XScroll',
  // 不能在生命周期created时获取dom ，这时还没有加载完html
  mounted () {
    /* eslint-disable no-new */
    const bscroll = new BScroll(document.querySelector('.wrapper'), {
      probeType: 3,
      pullUpLoad: true
    })
    bscroll.on('scroll', (position) => {
      console.log(position)
    })
    // 获取dom方式一
    // new BScroll(document.querySelector('.wrapper'))
    // 获取dom方式二
    // new BScroll(document.querySelector(this.$refs.foo))
    // pullingUp   上拉到头激活
    bscroll.on('pullingUp', () => {
      setTimeout(() => {
        // 拉到底了通知又名上拉加载只能加载一次，finishllup函数可以在次重来
        bscroll.finishPullUp()
        alert('又可以加了')
      }, 2000)
    })
  }
}
</script>

<style scoped>
.wrapper {
  height: 150px;
  border: 1px solid #42b983;
  overflow: hidden;
}
</style>

常用方法

插件封组，封装以后，那些组件需要引用的话，外层套一个bcroll 就可以使用，比较方便，主要原因是如果更换bcroll 版本不需要每个文件都换

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

<script>
import BScroll from 'better-scroll'

export default {
  name: 'Scroll',
  data () {
    return {
      Scroll: ''
    }
  },
  mounted () {
    // 以下方式不太明智，建议用ref方式，同名CLASS 会出问题
    // this.scroll = new BScroll(document.querySelector('.wrapper'))
    this.Scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

<style scoped>

</style>

View Code

使用示例：里面的内空不能用浮动布局，一旦脱离文档流，将不能参与计算,想让一个div区显示在正中，方法有二，第一个方法是使div定位top button 第二个方法是计算视口高度，先算上上面元素多少
然后百分比显示在中间，以下示例计算视口高度算法：

<template>
  <div>
    <div  class="home">
      <div class=" text hiet">众油宝商城菜单</div>
      <b-scroll class="wrapper">
        <div class="content">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </b-scroll>
      <div class="text bter">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
    </div>
    </div>
</template>

<script>
import bScroll from '../components/common/scroll/bScroll'

export default {
  name: 'bIndex',
  components: {
    bScroll
  }
}
</script>

<style scoped>
.home{
  border: 2px solid #0074D9;
//通过height 计算视口高度
  height: 100vh;
}
.text{
  height:45px ;
  line-height: 45px;
  background: #7f7f7f;
}
.wrapper {
  width: 450px;
  height: calc(100% - 98px);
//滚动位置根据视口高度计算
  border: #C21F39 1px solid;
  overflow: hidden;
}

ul {
  padding: 0;
  padding-left: 5px;
  width: 440px;
  height: auto;
  margin: 0 auto;
  border: 2px solid #C21F39;
  overflow: hidden;

}

li {
  list-style-type: none;
  float: left;
  margin: 2px;
  width: 210px;
  background: #999999;
  height: 350px;
}

</style>