微信小程序下拉触底操作

app.js
//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

index.js

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    arr:[],
    page:1,
    isHidden:true,//没有更多数据了
    refresh:false//是否下拉刷新 默认没有
  },
  //wx.request请求数据的方法
  getData:function(){      //页面加载的提示信息
      wx.showLoading({
        title: '数据正在加载中...',
      })
      let that =this;
      wx.request({
        url:"https://route.showapi.com/1700-2",
        data:{
          "showapi_appid":"102953",
          "showapi_sign":"74a3c3c9d2c74a818d4b3abfdd80da21",
          "page":this.data.page,//2
          "keyword":"妈妈"
        },
        success:function(res){ //成功的请求到了数据
           wx.hideLoading()    //判断是否还有数据
          if (res.data.showapi_res_body.contentlist==""){
            that.setData({
              isHidden:false
            })
            return
          }
 //请求数据的来源  是下拉 还是触底   
 //如果是触底操作  需要拼接
     var data = res.data.showapi_res_body.contentlist //33
    var  newArr = []
          if(that.data.refresh){//true          //如果是下拉
            newArr = data
          }else{
            //触底操作
            console.log(that.data.arr,"装数据的容器");//50
            newArr = that.data.arr.concat(data)
            console.log(newArr, "拼接数据的容器");
          }
          that.setData({
            arr:newArr
          })       
        }
      })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { //调用获取数据的方法
    this.getData()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //需要在app.json中  开启一下
    //  "backgroundColor":"#ccc",
    //"enablePullDownRefresh": true
      console.log(1)
      var page = this.data.page//
      page++//2
      this.setData({
        refresh:true,
        page:page
      })
      this.getData()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
      // console.log("触底了");
      //50+50
      var page = this.data.page//1
      page++//2
      //50老数据 arr
      this.setData({
        refresh:false,
        page:page
      })
      this.getData() //arr 50
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

index.wxml

<!-- 
https://www.showapi.com
15200088836
15200088836w
1.进入到index页 请求加载的方法 放入到onLoad
监听页面加载
2.下拉刷新的时候   页面+1  page  
3.老数据10条+新数据10条
 -->
<view class="item"
wx:for="{{arr}}"
wx:key="{{item.id}}"
>
<view class='content'>
<view class="left">{{index+1}}</view>
<view class="center">{{item.title}}</view>
</view>
</view>
<view class="loading"  hidden='{{isHidden}}'>已经没有更多数据了</view>

index.wxss

/* pages/index/index.wxss */

.item{
  padding-left:.7rem;
  font-size:1rem;
}
.content{
  height: 4rem;
  line-height: 4rem;
  width: 20rem;
  border:1px solid #e5e5e5;
  display: flex;
}
.left{
  padding: 0 1.5rem;
  height: 4rem;
  line-height: 4rem;
  color:red;  
}
.loading{
  text-align: center;
  padding: 10rpx;
  color:red;
}