小程序下拉刷新和上拉加载

方法一、页面只有列表的时候比较合适

// index.json
{
  "usingComponents": {},
  "navigationBarTitleText": "列表",
  "backgroundTextStyle": "dark",
  "enablePullDownRefresh": true
}

// index.js
// 下拉刷新
  onPullDownRefresh: function () {
    this.data.page.pageNum = 1
    this.getList();
  },
// 上拉加载
  onReachBottom: function () {
    this.data.page.pageNum++
    this.getList();
  }

// 通知页面停止下拉刷新效果
wx.stopPullDownRefresh();

方法二、页面除了列表还要搜索框，选择框等功能

// index.wxml
/**
  catchtouchmove  相当于preventDefault，是会阻止页面滚动的
  catchtouchend 触摸结束
  scroll-view  一定要设置高
  scroll-y 允许y轴滚动
  scroll-top 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效
*/
<view class="bg" catchtouchmove="boxMove">
    <scroll-view class="item-box" catchtouchend="touchEnd" scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="loadMore" bindscrolltoupper="refresh" bindscroll="scroll">
        <view class="items">
            <view wx:for="{{list}}" wx:key="index" class="item">
                <view class="inner">
                    <view class="product-info">
                        <text>{{item.productName}}</text>
                        <text>{{item.enterpriseName}}</text>
                    </view>
                </view>
            </view>

            <view class="empty" wx:if="{{empty}}">
                <image src="/pages/imgs/kbox.png"></image>
                <text>暂无数据 </text>
            </view>
            <view class="load" wx:if="{{list && list.length !== 0 && loading}}">
                <text> ——— 全部加载完毕 ——— </text>
            </view>
        </view>
    </scroll-view>
</view>

// index.js
data:{
   list: [],
   scrollTop: 0,
   scrollHeight: 0,
   empty: false,
   loading: true
},
boxMove: function () {
    // 禁止页面拖动
    return true;
},
onLoad: function () {
    // 页面初始化 options为页面跳转所带来的参数
    // 这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          scrollHeight: res.windowHeight - 145  // 145px 为搜索框，选择框的高度
        });
      }
    });
    this.getList();
},
scroll: function (e) {
    // console.log(e.detail.scrollTop);
    if (t) {
      clearTimeout(t);
    }
    t = setTimeout(() => {
      this.setData({
        scrollTop: e.detail.scrollTop
      });
    }, 500);
  },
  touchEnd: function (e) {
    // console.log(e);
    // console.log(this.data.scrollTop);
    if (this.data.scrollTop == 0) {
      this.data.page.pageNum = 1
      this.data.loading = true
      // 显示顶部刷新图标
      wx.showNavigationBarLoading();
      this.getList();
      console.log("刷新数据");
    }
  },
  //页面滑动到底部
  loadMore: function () {
    if (!this.data.loading) return;
    this.data.page.pageNum++
    this.getEquipment('加载更多...');
    console.log("加载数据");
  },
  refresh: function (event) {
    // 该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
    this.setData({
      scrollTop: 0
    });
  },
getList:function () {

}