better-scroll使用

文档地址:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
结合vue的学习:https://zhuanlan.zhihu.com/p/27407024
作者成品:http://ustbhuangyi.com/sell/#/goods

一.使用

代码是使用vue-cli的项目
html

        

          

            
              
              {{item.order_sn}}
              
              
              {{item.date}}
              
              
              ￥ {{item.partner_profit  | number2}}
              
            
          
          

            
              
              
{{loadingText}}
              
              
                
              
            
          
        
      

js

mounted() {
      // 设置wrapper的高度
      this.$refs.wrapper.style.height = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop + "px";
      // better-scroll 的content高度不大于wrapper高度就不能滚动,这里的问题是,当一页数据的高度不够srapper的高度的时候,即使存在n页也不能下拉
      // 需要设置content的min-height大于wrapper高度
      this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px";
      this._initScroll();
      this.getIncomeDetail(this.nextPage);
      // 设置scroll的高度
      // this.scrollHeight = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop ;
    },
methods:{
	_initScroll() {
        this.orderScroll = new BScroll(this.$refs.wrapper, {
          probeType: 3,    
          click:true,
          pullUpLoad: {   // 配置上啦加载
            threshold: -80   //上啦80px的时候加载
          },
          mouseWheel: {    // pc端同样能滑动
            speed: 20,
            invert: false
          },
          useTransition:false,  // 防止iphone微信滑动卡顿
        });
        // 上拉加载数据
        this.orderScroll.on('pullingUp',()=>{
          this.scrollFinish = false;
          // 防止一次上拉触发两次事件,不要在ajax的请求数据完成事件中调用下面的finish方法,否则有可能一次上拉触发两次上拉事件
          this.orderScroll.finishPullUp();
          // 加载数据
          this.getIncomeDetail(this.nextPage);
        });
      }
}    

二.注意

https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#滚动原理
这里官网的明确说明
当 content 的高度不超过父容器的高度，是不能滚动的
当 content 的高度不超过父容器的高度，是不能滚动的
当 content 的高度不超过父容器的高度，是不能滚动的
所以上文中要有代如下:

// 设置content的高度比wrapper的高度大1px
this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px";

三. 上拉加载下拉刷新中注意

上拉加载和下拉刷新后要调用响应的finishPullUp和finishPullDown,然后在调用refresh
上拉加载下拉刷新当从本地获取数据时,因为很快,所以不会出现问题
但是, 当从服务器获取数据的时候,调用finishPullUp和finishPullDown和finish的时机很重要,应该在加载完数据的$nextTick中调用,否则会出现下拉问题

四.其他的请看文档即可