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

小程序上拉加载更多数据

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

本人也是新手进行刚刚接触小程序然后需要一个上拉加载数据的代码,百度看了一下自己做出一点总结希望可以帮助跟我一样入坑的新手

首先是页面.wxml代码

<!--上拉刷新加载-->
<page>
  <view class="item" wx:for="{{shujulist}}">
      <view class="text">
        <text class="title">{{item.id}}</text>
        <text class="description">{{item.name}}</text>
      </view>
  </view>
</page>

接下来是.json代码

{
  "enablePullDownRefresh": true,//这个是上拉下拉刷新设置的,不加这个默认不会刷新上拉下拉刷新的
  "onReachBottomDistance": 0//这个是距离多远触发上面那个设置
}

最后是.js代码了

//定义全局变量
var url = "http://192.168.0.125:99/admin/Index/shuju";
var page = 0;

//定义一个数组,这个数组写在data里面,用于页面上面的加载
"shujulist": [],

// 请求数据
var loadMore = function(that) {
  wx.showLoading({
    title: '玩命加载中',//上拉的时候会出现一个提示框
  })
  wx.request({
    url: url,
    data: {
      page: page
    },
    method: 'POST',
    header: {
      'content-type': 'json'
    },
    success: function(res) {
      console.log(res);
      //注意这个地方,我再上面改成用GET访问数据后,然后这个回调数据就多了一个data,你们自己要多多注意,我也不知道什么问题
      var shujulist = that.data.shujulist;
      for (var i = 0; i < res.data.length; i++) {
        shujulist.push(res.data[i]);
      }
      that.setData({
        shujulist: shujulist
      });
      page++;
      wx.hideLoading();
    }
  });
}


//这个方法写在Page()里面这个是监听屏幕滑到最下面时候的事件
onReachBottom: function() {
    var that = this;
    loadMore(that);
}

最后温馨提醒一下,要把开发工具中的不效验合法域名给勾上,不然访问数据的时候他会一直提示你域名不合法。


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
微信小程序H5预览页面框架(二维码不隐藏)发布时间:2022-07-18
下一篇:
小程序悬浮框 - 诚明小巫发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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