微信小プログラムの上で引っ張って更に多くのデータをロードして底に触れてロードしてクリックして更に多くのデータをロードします

開発ニーズ
ページに入り、初期データをロードし、ページを下にドラッグすると、新しいデータが自動的にロードされます.つまり、より多くのデータがアップロードされます.
デモ
index.wxml

  {{item.title}}
    ID:{{item.id}}
  





  
         
  



  
           
  

index.js

Page({
  data: {
    listdata:[],  //  
    moredata: '',
    p:0, //    ；     
    hasMore:true //  
  },

  //      
  onLoad: function (options) {
    var that = this;

  //    
  var p = that.data.p;
    this.loadmore();
  },

  //    
  onReachBottom:function(){
    var that = this;
    //            
    var moredata = that.data.moredata;
    //    ，     
    if (moredata.more != 0) {
      this.loadmore();
      //     ，     ，         
    }else{
      that.setData({
        "hasMore": false
      })
    }
  },

  //    
  loadmore:function(){

    //    
    wx.showLoading({
      title: '   ',
    })

    var that = this;
    //    
    var p = ++that.data.p;

    //     
    wx.request({
      url: '     /server.php?page=' + p,
      data: {
        "json": JSON.stringify({
          "p": p
        })
      },

      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },

      //    ，    
      success:function(res){
        
        //      
        wx.hideLoading();

        //        
        if (res.data != 0) {
          that.setData({
            //               
            "listdata": that.data.listdata.concat(res.data), //    
            "moredata": res.data,
            "p":p
          })
        } else {
          that.setData({
            "hasMore":false
          })
        }
      }
    })
  }
})

説明1、urlはあなたのサービス側リンクに変更され、フォーマットは

http:  /  /?page=  

例:

http://www.baidu.com/api/data.php?page=1

ページ番号は可変なので変数pを宣言するので、

`url: 'http://www.baidu.com/api/data.php?page' + p,`

index.wxss

.listitem{
  width: 90%;
  height: 155px;
  background: rgba(0, 0, 0, 0.2);
  margin:10px auto;
  text-align: center;
  position: relative;
  color:#fff;
}

.listitem .cover{
  width:100%;
  height:155px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

.load-more-wrap .load-content{
  text-align: center;
  margin:30px auto 30px;
  color:#ccc;
  font-size: 15px;
}

サービス側が返すデータフォーマット
json配列の形式を返します.たとえば、

[
    {"id":"1","title":"  1","coverimg":"url1"},
    {"id":"2","title":"  2","coverimg":"url2"},
    {"id":"3","title":"  3","coverimg":"url3"},
    {"id":"4","title":"  4","coverimg":"url4"},
    {"id":"5","title":"  5","coverimg":"url5"}
]

作成者
Author:TANKING Date:2020-04-20 WeChat:face6009