微信小程序实现下拉简单展示接口数据

在.js文件中这样写，代码如下：

 data: {
    count: 0,
    tableGroup: [],
    groupList: {
      // 当前页码
      page: 1,
      // 每条页数
      limit: 5
    },
  },
  onPullDownRefresh: function() {
    var that = this;
    console.log(this,'this')
    var count = that.data.count + 1;
    wx.request({
      url: '接口地址',
      method: 'GET',
      data: {
        page: count, // 传递page参数
        limit: '11' // 传递limit参数
      },
      success: function(res) {
        // 更新页面数据
        // ...
        console.log(res.data.data.list)
        if (count > 3) {
          count = 0;
        }
        // that.setData({
        //   tableGroup: res.data.data.list
        // });
        // 更新count的值
        that.setData({
          count: count,
          tableGroup: res.data.data.list
        });
        
        // 停止下拉刷新
        wx.stopPullDownRefresh();
      },
      fail: function(err) {
        console.log(err);
        // 停止下拉刷新
        wx.stopPullDownRefresh();
      }
    })
  },

在wxml文件中这样写，代码如下：

<view>
  <scroll-view class="content" scroll-y="{
  {true}}" bindscrolltoupper="onScrollToUpper">
    <view>刷新次数: {
  { count }}</view>
    <!-- 此处是其他内容 -->
    <block wx:for="{
  {tableGroup}}" wx:key="index">
      <view>{
  {item.name}}</view>
      <!-- 其他数据展示 -->
    </block>
  </scroll-view>
</view>

在.json文件中记得添加如下代码，打开下拉功能

"window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#282A36",

    "navigationBarTitleText": "Linux",

    "navigationBarTextStyle":"white",

    "enablePullDownRefresh": true     //打开下拉功能

  },