小程序 使用view实现下拉刷新，上拉加载数据

现在人工智能非常火爆，很多朋友都想学，但是一般的教程都是为博硕生准备的，太难看懂了。最近发现了一个非常适合小白入门的教程，不仅通俗易懂而且还很风趣幽默。所以忍不住分享一下给大家。点这里可以跳转到教程。​​​​​​​

 

如图,微信小程序实现上拉加载，下拉刷新。代码如下

js文件代码

 

// pages/loading/loading.js
var p = 1
var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action";
var GetList = function (that) {
  that.setData({
    hidden: false
  });
  wx.request({
    url: url,
    data: {
      pageSize: 10,
      pageNo: p
    },
    success: function (res) {
      var l = that.data.list
      for (var i = 0; i < res.data.length; i++) {
        l.push(res.data[i])
      }
      that.setData({
        list: l
      });
      p++;
      that.setData({
        hidden: true
      });
    }
  });
}
Page({
  data: {
    list: []
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    var that = this
    GetList(that)
  },
  onPullDownRefresh: function () {
    //下拉
    console.log("下拉");
    p = 1;
    this.setData({
      list: [],
    });
    var that = this
    GetList(that)
  },
  onReachBottom: function () {
    //上拉
    console.log("上拉")
    var that = this
    GetList(that)
  }
})

json文件代码

 

 

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

wxml文件代码

<view class="item" wx:for="{{list}}" wx:for-item="item" for:key="item.carrierId">
    <image class="img" src="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image>
    <text calss="txt" >{{item.carrierName}}</text>
    <text class="txt">{{item.carrierId}}</text>
</view>

wxss文件代码

 

 

.img{
    border-radius: 50%;
    height: 100rpx;
    width: 100rpx;
}
.txt{
    margin: 10rpx 10rps 10rpx 10rpx;
    font-family: "微软雅黑";
    font-size: 50rpx;
    height: 50rpx;
}

说明：这个接口返回的就是   分页的数据，根据传入的参数，每次返回不同的数据

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action