前端移动端开发,better-scroll的使用(vue常用插件)_betterscroll 1.15.2详解

better-scroll插件

用于移动端开发,让滚动更加丝滑

1.安装

npm install --save better-scroll@1.15.2
1

2.封装

封装成一个组件,方便复用,代码如下

<template>
  <div class="wrapper" ref="wrapper">
    <div>
      <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,
        message: '哈哈哈'
      }
    },
    mounted() {
      // 1.创建BScroll对象
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
        probeType: this.probeType,
        pullUpLoad: this.pullUpLoad
      })

      // 2.监听滚动的位置
      if (this.probeType === 2 || this.probeType === 3){
        this.scroll.on('scroll', (position) => {
          // console.log(position);
          this.$emit('scroll', position)

        })
      }

      // 3.监听上拉事件
      if (this.pullUpLoad){
        this.scroll.on('pullingUp', () => {
          this.$emit('pullingUp')
        })
      }

    },
    methods: {
      scrollTo(x, y, time=300) {
        this.scroll && this.scroll.scrollTo(x, y, time)
      },
      finishPullUp() {
        this.scroll && this.scroll.finishPullUp()
      },
      refresh() {
        console.log('----')
        this.scroll && this.scroll.refresh()
      },
      getScrollY(){
        return this.scroll ? this.scroll.y : 0
      }
    }
  }
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

默认情况下不能监听滚动位置,传入probeType

• 0,1 都是不侦测
• 2 手指滚动的过程中侦测,手指离开的惯性滚动不侦测
• 3 只要滚动都侦测

pullUpLoad

• 默认是false,不能监听pullingUp事件

• true时,可以监听pullingUp事件,当拉到底部时触发,可以实现上拉加载更多的功能

3.组件中使用

3.1导入封装好的组件

<script>
  import Scroll from '@/components/common/scroll/Scroll'
</script>
1
2
3

3.2 注册

export default {
  name: "Category",
  components: {
    Scroll
  }
}
1
2
3
4
5
6

3.3 模板中挂载

把要滚动的内容放入,不滚动的放在外面,排序默认从上到下

<template>
  <div id="profile"> //根标签
    ...不需要滚动的内容,比如导航栏
    
    <scroll class="content">
      ...要滚动的内容
    <scroll>
    
    ...不需要滚动的内容,比如底部tabbar
  <div/>
</template>
1
2
3
4
5
6
7
8
9
10
11

3.4设置样式,确定滚动区高度

1. 设高度,(计算麻烦推荐第二种方法)

滚动区高度=可视区高度-上不滚动区域高度-下不滚动区域高度

设置的height为滚动区的高度

<style scoped>
  .content {
    height: 300px;
    overflow: hidden;
  }
</style>
1
2
3
4
5
6

2. 设定位

根标签设置相对定位,scroll设置绝对定位.

通过子绝父相,设置top和bottom值,决定滚动区的高度.

top是上不滚动区域高度,bottom是下不滚动区域高度.

<style scoped>
#profile {
  height: 100vh;  //必须要有
  position: relative;
}

.content {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 100px;
  left: 0;
  right: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.原理

当滚动区里的内容大于滚动区的高度时,就可以滚动.所以滚动区的高度必须设置.