immoRtals

# better-scroll的使用

# 参考网址 (opens new window)

  • 安装： npm install better-scroll --save
  • 组件内局部引用：import BScroll from 'better-scroll'

# html

<div ref="wrapper" class="wrapper">
    <group>
      <cell v-for="item in supplier" :key="item.Name" value-align="left">{{item.Name}}</cell>
      <div v-show = "footshow">
        <span>{{foottit}}</span>
      </div>
    </group>
</div>
1
2
3
4
5
6
7
8

# js

methods:{
    better_scrool(){
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper,{
        //创建new BScroll
          click: true,
          scrollY: true,
          pullUpLoad: {//设置从底部上拉的高度超过60px的时候触发pullingUp事件，
            threshold: 60
          }
        });
        this.scroll.on('pullingUp', () => {
          this.scroll.refresh();//重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
          if(this.supplier_number<= 30){
            this.get_data();//这部分的代码是当pullingUp事件正在发生的时候你希望在这过程中所进行的操作
          }
          this.show_foot();
          this.scroll.finishPullUp(); //上拉加载结束后执行finishPullUp方法告诉 better-scroll 数据已加载
        });
      });
    }
}

 mounted:function(){
    this.better_scrool();
  }
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
# 总结：整个better-scroll的过程是先初始化一个BScroll，然后是使用
# better-scroll里面的on属性进行事件监听，在监听的过程中，执行请求数据的方法。

← flexible →