微信小程序实现下拉简单展示接口数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现下拉简单展示接口数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在.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 //打开下拉功能

},文章来源地址https://www.toymoban.com/news/detail-808847.html

到了这里，关于微信小程序实现下拉简单展示接口数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！