• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 - (下拉)加载更多数据

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

 

 

注意和后端配合就行了,前端也只能把数据拼接起来!

 

无论是下拉加载还是加载更多,一样的道理!

 

注意首次加载传递参数

 

注意每次加载数据数

 

wxml

    <view class=\'table-rank\'>
      <view class=\'tables center\' wx:for="{{ranklist}}" wx:for-index="idx" wx:key="prototype">
        <view class=\'stage-rank\'>
          {{idx+1}}
        </view>
        <view class=\'name\'>{{item.name}}</view>
        <view class=\'price\'>{{item.count}}</view>
      </view>
    </view>

    <view class=\'more\'>
      <button loading="{{loading}}" disabled="{{disabled}}" catchtap="setLoading">{{loadText}}</button>
    </view>

 

js

var app = getApp().globalData;

Page({
  data: {
    loadText: \'加载更多\',
    ranklist: [],
    count: 1
  },


  onLoad: function(res) {
    // 首次加载:传参数num:0
    let num = 0;
    let _page = this;
    let uid = wx.getStorageSync(\'uinfo\').uid;


    wx.request({
      url: \'url\',
      data: {
        uid,
        num
      },
      header: {
        \'content-type\': \'application/json\'
      },
      method: \'GET\',
      dataType: \'json\',
      responseType: \'text\',
      success(res) {
        _page.setData({
          ranklist: res.data.all_list,
          me: res.data.me
        });
      }
    })
  },

  //点击 加载更多 按钮
  setLoading(e) {

    let _this = this;
    let _page = this;

    // 暂存数据
    let ranklistBefore = _this.data.ranklist;

    let uid = wx.getStorageSync(\'uinfo\').uid;

    // 每次加载数据条数(10)
    let num = _this.data.count++ * 10;

    wx.request({
      url: app.api.simulation_ranking,
      data: {
        uid,
        num
      },
      header: {
        \'content-type\': \'application/json\'
      },
      method: \'GET\',
      dataType: \'json\',
      responseType: \'text\',
      success(res) {
        // 每次加载数据,请求一次就发送10条数据过来
        let eachData = res.data.all_list;

        if (eachData.length == 0) {
          wx.showToast({
            title: \'没有更多数据了!~\',
            icon: \'none\'
          })
        } else {
          wx.showToast({
            title: \'数据加载中...\',
            icon: \'none\'
          })
        }
        
        _page.setData({
          loadText: "数据请求中",
          loading: true,
          ranklist: ranklistBefore.concat(eachData),
          loadText: "加载更多",
          loading: false,
        });
      }
    })
  }
});

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap