小程序上拉加载更多数据

「爱情、让人受尽委屈。」 2022-03-31 07:58 339阅读 0赞

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

首先是页面.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);
    }

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTI0NTE2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTI0NTE2_size_16_color_FFFFFF_t_70]: /images/20220331/2df348c42f9545d2b79bb7777c73bb55.png