微信小程序实现页面上拉触底事件下拉刷新

滑到距离底部200的时候，数据加载并且展示下一页数据

Refresh.wxml文件

<!-- 刷新的小demo -->
<view class="fresh" class="fresh" wx:for="{{reFreshList}}" wx:key="id">
    <!-- 图片 -->
    <view class="bg_img">
      <image src="{{item.images[0]}}"></image>
    </view>
    <!-- 文本 -->
    <view class="text">
      <text class="name">{{item.name}}</text>
      <text class="phone">电话:{{item.phone}}</text>
      <text class="address">地址:{{item.address}}</text>
      <text class="time">营业时间:{{item.businessHours}}</text>
    </view>
</view>

Refresh.wxss文件

/* pages/Refresh/Refresh.wxss */
.fresh{
  display: flex;
  flex-direction: row;
  border: 1px solid #efefef;
  padding-top:5px 
}
/* .bg_img{
  width: 50%;
} */
.bg_img image{
  width: 250rpx;
  height: 250rpx;
  display: block;
}
.text{
  display: flex;
  flex-direction: column;
  font-size: 12px;
  padding-left: 10px;
  justify-content: space-around;
}
.name{
  font-weight: bold;
}

Refresh.json文件

{
  "usingComponents": {},
  "onReachBottomDistance": 200,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

Refresh.js文件

// pages/Refresh/Refresh.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 携带过来的标题bar的参数定义
    query: {},
    // 收集数据的值
    reFreshList: [],
    // 展示第几页
    page: 1,
    // 一页展示几条数据
    pageSize: 10,
    // 总共多少条数据
    total: 0
  },
  getReFresh(stopCallbak) {
    // 提前使用加载loading效果
    wx.showLoading({
      title: '数据在加载中',
    })
    wx.request({
      url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data: {
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success: (res) => {
        console.log(res);
        this.setData({
          reFreshList: [...this.data.reFreshList, ...res.data],
          total: res.header['X-Total-Count'] - 0
        })
      },
      complete: () => {
        wx.hideLoading()
        // wx.stopPullDownRefresh()
        stopCallbak && stopCallbak()
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 注意！！！这个options是获取到数据的那个页面拿参数，不是点击的那个页面
    console.log(111)
    console.log(options); //这个拿到的就是所携带的参数，但是不能全局使用，所以就在data里面先定义声明
    this.setData({
      query: options
    })
    this.getReFresh()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 只能在这个方法里面进行标题的渲染
    wx.setNavigationBarTitle({
      // 动态的生成title
      title: this.data.query.title,
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // 当下拉刷新的时候，要使数据重新重置
    this.setData({
      page:1,
      reFreshList:[],
      total:0,
    })
    this.getReFresh(()=>{
      wx.stopPullDownRefresh()
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 当刷新的时候就让page+1实现分页
    // 当每次距离还有两百的距离的时候就实现将page+1页
    // 出现的问题，当没有数据的时候要进行最后一页的展示
    if (this.data.reFreshList.length == this.data.total) {
      return wx.showToast({
        title: '数据加载完毕！',
        icon: 'none'
      })
    }
    this.setData({
      page: this.data.page + 1
    })
    this.getReFresh()
  },

})