微信小程序下拉刷新和上拉加载更多

下拉刷新和上拉加载更多

效果图：

代码

js

const app = getApp()

Page({
  data: {
    nomoreVisible:false,//没有更多了 是否显示
    arr1: [{
        "id": "1"
      },
      {
        "id": "2"
      },
      {
        "id": "3"
      },
      {
        "id": "4"
      },
      {
        "id": "5"
      },
      {
        "id": "6"
      },
      {
        "id": "7"
      },
      {
        "id": "8"
      },
      {
        "id": "9"
      },
      {
        "id": "10"
      },
    ],

    //要增加的数组
    arr2: [{
        "id": "11"
      },
      {
        "id": "12"
      },
      {
        "id": "13"
      },
      {
        "id": "14"
      },
      {
        "id": "15"
      },
      {
        "id": "16"
      },
      {
        "id": "17"
      },
      {
        "id": "18"
      },
      {
        "id": "19"
      },
      {
        "id": "20"
      },
    ]
  },
  onLoad: function () {

  },

  onPullDownRefresh() {
    console.log('--------下拉刷新-------')

    // 　　wx.showNavigationBarLoading() //在标题栏中显示加载
    // wx.startPullDownRefresh()
    // 两秒后隐藏
    //wx.hideNavigationBarLoading()

    
    // 加载数据完成后
    wx.stopPullDownRefresh()
  },

  /*上拉触底时触发*/
  onReachBottom: function () {
    var that = this
    console.log('--------上拉加载更多-------')

    if(that.data.arr1.length<20){
      that.data.arr1 = that.data.arr1.concat(that.data.arr2);
      that.setData({
        'arr1': that.data.arr1
      })
    }else{//没有更多了
      that.data.nomoreVisible=true
    }
    

  }

})

.json

{
  
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "onReachBottomDistance":50
}

.wxml

<view class="intro">
	<view wx:for="{{arr1}}" class="view_item">
		<text>{{item.id}}</text>
	</view>
	<text style="color:red" visible="{{nomoreVisible}}">--没有更多了--</text>
</view>

.wxss

page{
  width: 100%;
  height: 100%;
}
.intro {

  margin: 30px;
  text-align: center;
}
.view_item {
  height: 180rpx;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* 圆角 */
  border-radius: 20rpx;

  /* 边 */
  border: 3rpx solid #E0E3DA;
  box-shadow: 2rpx 2rpx 2rpx 2rpx #E0E3DA;
  background-color: #ffffff;
  margin: 10rpx;

  /* padding使得文字和图片不至于贴着边框 */
  padding: 15rpx;

  position: relative;
}