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

在.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文件中这样写,代码如下:


  
    刷新次数: {{ count }}
    
    
      {{item.name}}
      
    
  

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

"window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#282A36",

    "navigationBarTitleText": "Linux",

    "navigationBarTextStyle":"white",

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

  },

你可能感兴趣的:(微信小程序,小程序,javascript,vue.js)