小程序写一个上拉加载更多的数据

wxml

<view class="movieContent">
    <!-- 精选 -->
    <view class="doorContent">
     <block wx:for="{{commodityData}}" wx:key="idx">
      <view class="commodityItems">
        <view class="commodityImgBox">
          <image class="commodityImg" src="{{item.goodsThumbnailUrl}}"></image>
        </view>
        <view class="commodityTitle">{{item.goodsName}}</view>
        <view class="discounts">
          <text>减</text><text>{{item.couponDiscount/100}}元券</text>
        </view>
        <view class="salesVolume">
          <text>券后</text><text>￥{{item.afterDiscount}}</text><text>已售{{item.salesTip}}+件</text>
        </view>
      </view>
     </block>
     <view class="nomore-tip" style="margin-top:-16rpx;" wx:if="{{noMoretip&&commodityData.length>0}}">没有更多数据啦~</view> 
    </view>
  </view>

wxss

/*商品信息*/
.doorContent{
  width: 95%;
  margin: 16rpx auto;
  overflow: hidden;
}
.commodityItems{
  float: left;
  height: 480rpx;
  width: 49%;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  padding: 10rpx;
  box-sizing: border-box;

}
.commodityItems:nth-child(2n){
  float: right;
}
.commodityImgBox{
  width: 100%;
  height: 300rpx;
  overflow:hidden;
  border-radius: 10rpx;
}
.commodityImg{
  width: 100%;
	height: 100%;
  margin:0;
	padding:0;
	object-fit: cover;
}
.commodityTitle{
  color: #161617;
  font-size: 30rpx;
  width: 100%;
  line-height: 35rpx;
  height: 35rpx;
  overflow: hidden;
  margin: 10rpx 0;
}
.discounts>text:nth-of-type(1){
  display: inline-block;
  background: #e02e24;
  color: #fff;
  font-size: 28rpx;
  padding: 0 6rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}
.discounts>text:nth-of-type(2){
  display: inline-block;
  background: #fcefed;
  color: #e03128;
  font-size: 28rpx;
  padding: 0 6rpx;
  box-sizing: border-box;
  border-radius: 5rpx;
}
.salesVolume{
  margin-top: 10rpx;
}
.salesVolume>text:nth-of-type(1){
  color: #e1342a;
  font-size: 28rpx;
}
.salesVolume>text:nth-of-type(2){
  font-size: 32rpx;
  color: #e1342a;
}
.salesVolume>text:nth-of-type(3){
  color: #bbbbbb;
  font-size: 22rpx;
}
.nomore-tip{
  color: #bbbbbb;
  text-align: center;
  width: 100%;
}

js

const app=getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    /*所有商品数据*/
    commodityData:[],
    page:1,	//商品页码,
    pageSize:20,//商品个数
    noMoretip: false,    //false为有更多数据，true为数据加载完毕
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getGoodList()
  },
  /*商品列表*/
  getGoodList(){
    wx.showLoading({//不会关闭，在下边请求完成后执行关闭操作
      title: '加载中',
    })
    /*获得商品数据 */
    wx.request({
      url:app.globalData.baseUrl+'goodsSearch',
      method:"get",
      data:{
        page:this.data.page,
        pageSize:this.data.pageSize
      },
      success:res=>{
        let temp=res.data.goodsSearchResponse.goodsList//返回的数据(这里是我需要的数据)
        var allArr=[];
        var initArr=this.data.commodityData?this.data.commodityData:[]//获取已加载的数据
        console.log("已加载的数据",initArr)
        var newArr=temp//获取新加载的数据
        console.log("新加载的数据",newArr)
        var lastPageLength=newArr.length//新加载数据的长度
        console.log("新加载的数据长度",lastPageLength)
        if(this.data.page<=0){
          allArr=temp
        }else{
          allArr=initArr.concat(newArr)//如果不是第一页，连接已加载与新加载商品
        }

        if(lastPageLength<10){//如果新加载的一页课程数量小于10，则没有下一页
          this.setData({
            noMoretip:true
          })
        }
        this.setData({
          commodityData:allArr
        })
      },
      complete: function () {
        wx.hideLoading();//关闭加载中提示层
      }
    })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("刷新了")
    var page=this.data.page//获取现在页码
    if(!this.data.noMoretip){
      page++
      this.setData({			//页码加一，调用函数，获取下一页内容
        page:page
      })
      this.getGoodList();
    }
  },
  /*
  *下拉刷新,要将商品列表，页码都改为初始值，否则会出现刷新之后商品的错乱
  */
  onPullDownRefresh: function () {
    this.setData({
      page: 0,
      noMoretip: false,    //无更多
      commodityData: [], //商品列表
    })
    this.getGoodList();
  },
})