微信小程序scroll-view下拉刷新与上拉加载更多_微信小程序上拉加载更多 loading

1、wxml代码

<!-- 数据列表 -->
<scroll-view class="box-scroll" scroll-y='true' refresher-enabled="true" refresher-threshold="{{100}}" refresher-default-style="black" refresher-background="white" refresher-triggered="{{triggered}}" bindrefresherrefresh="onScrollRefresh" bindscrolltolower="bindscrolltolowerFn">
    <view>
       
    </view>
    <view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view>
    <view class="loading" hidden="{{!searchLoadingComplete}}">已加载全部</view>
</scroll-view>

2、js代码

Page({
  data: {
    List: [],
    patientId: '',
    // 刷新加载配置
    triggered: false,
    searchLoading:false,
    searchLoadingComplete:false,
    scrollTop:20,
    ok:10
  },
 
  //用户下拉动作
  onScrollRefresh: function () {
    var that=this;
    setTimeout(function(){
      that.setData({
        triggered: false,
      })
    },2000);
  },
 
  //上拉加载
  bindscrolltolowerFn: function(){
    // getStuList为请求服务端数据方法
    var that=this;
 
    that.setData({
        searchLoading: true,
      
    })
 
    console.log("====上拉加载======")
 
    setTimeout(function(){
        that.setData({
            searchLoading: false,
            ok:20
        })
      },2000);
               
   },
})

3、需要注意的是当前页面最外层元素的样式里要加上overflow：scroll 或者 overflow-y: scroll 否则scroll-view上的方法不起作用