小程序的上拉加载、下拉刷新

下拉刷新 

onPullDownRefresh() {
   //执行的程序
    this.getFamilyList()

    wx.showLoading({
        title: '加载中'
    })

    setTimeout(function () {
        wx.hideLoading()
    }, 1000)

    wx.hideNavigationBarLoading() //完成停止加载
}

"enablePullDownRefresh":true  放在json里面 下拉刷新才会生效

上拉加载

html部分

  // 上拉加载  这个利用小程序自带的标签 scroll-view 实现
   <div class='listBox'>
        <scroll-view
          class='listLeftScroll'
          scroll-y 
          @scrolltolower= 'scrollLeftBox'
        >
      </scroll-view> 
   </div>

js部分

     左边下拉加载 /order/sec/getMyOrderList/{paidStatus}/{page}
     paidStatus:支付状态 0未支付 1全部 有两个tab 左边全部 右边未支付
     page:页码 从0开始
     method get
     this.count  为这个请求回来的数组总长度
     this.itemLeftList.length 为从请求中得到的数组长度 下面用concat累加 当全部拿到数组后则不再累加 将paga置为初始值0
    scrollLeftBox () {
      this.pages += 1
      if (this.count <= this.itemLeftList.length) {
            this.pages = 0
            return false
      }
      this.$get(
        `/zgtf/order/sec/getMyOrderList/${1}/${this.pages}`
        ).then(data => {
          // this.itemLeftList
           this.itemLeftList = this.itemLeftList.concat(data.list)
          console.log('累加加', this.itemLeftList)
        }).catch(err => {
          console.log(err)
        })
    }

css部分说明

　　说明 因为scroll-view 为 scroll-y  竖向属性的时候需要高度 但有时候我们需要100% 但是不会生效

　　所有 我们可以将它的css设置为position:relative;即可实现100% 如下

　　类 .listLeftScroll的样式  之后将它的父盒子设置为position:absolute;

　　.listBox{
 　　  width:100%;height: 100%;position:absolute;top:0;left:0;
　　}
　　.listLeftScroll{
  　　 position: relative;
  　　 width:100%;
  　　 height:100%;
  　　 overflow:auto;
  　　 top:50px;
　　}