欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

文摘  小程序上拉加载和点击加载更多实例

小程序应用 本站 1410 0评论

1.上拉加载更多


在微信小程序里面其实是没有分页控件的,也就不能像网页一样点击页面跳转到某一页。这时我们需要使用上滑加载来实现一页一页的加载,当我们的内容到了底部以后,就会加载第二页的内容。那么这个上滑加载是如何实现的呢?


1.设置初始加载函数

初始加载函数的意思就是,当页面进来显示的时候,要显示一页的内容,这一项是必须的。


2.配置onReadBottom函数

配置触发小程序到底后加载数据,这里我们需要一个初始页码,每次到达页面底部以后,页码加1,

this.data.currentPage = this.data.currentPage + 1;

结果运用concat函数进行拼接:

that.setData({

items: that.data.items.concat(JSON.parse(res.data[0].list))

})

这样,我们在将页码传入后台进行数据分页查询,就可以实现分页加载了。


实例:


//index.wxml

<!-- 数据列表 -->

<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>

<view class='title'>{{item.title}}</view>

<view class='title'>资源ID:{{item.id}}</view>

<image class='cover'></image>

</view>

<!-- 如果还有更多数据可以加载,则显示玩命加载中 -->

<view class="load-more-wrap">

<block wx:if="{{hasMore}}">

<view class="load-content">

<text class="weui-loading"/><text class="loading-text">玩命加载中</text>

</view>

</block>

<!-- 否则显示没有更多内容了 -->

<block wx:else>

<view class="load-content">

<text>没有更多内容了</text>

</view>

</block>

</view>


//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"}

]


2.点击加载更多


和上拉刷新其实是一样的,只不过触发事件的形式稍微不同,原理一样。


实例:

//view

<view wx:if="{{arrayProject !=''}}">

    <view class="list-view" wx:for="{{arrayProject}}" wx:key="id">

          <view class="title"><h2><text bindtap="articlelink" data-id="{{item.id}}">{{item.title}}</text></h2>

</view>

          <view class='auth-view'>

              <view class='muted' id='mute-category' bindtap="typelink" data-alias="{{item.alias}}" data-name="{{item.cid}}" data-ctype=""><text class='fa fa-list-alt'></text><text  class="fontgreen ml">{{item.cid}}</text></view>

              <view class='muted'><text class='fa fa-clock-o'></text><text class="ml">{{item.created_at}}</text></view>

              <view class='muted'><text class='fa fa-eye'></text> {{item.scan_count}}</view>

              <view class='muted'><text class='fa fa-comments-o'></text> <text bindtap='' class="fontgreen"><text class="ml">{{item.comment_count}}</text>评论</text></view>

              <view class='muted'><view href='javascript:;' data-action='ding' data-id='240' like-url='/view/like' id='Addlike' class='action'><text class='fa fa-heart-o' style="color:#f78585"></text> <text class="ml">{{item.like_count}}喜欢</text></view>

              </view>

          </view>

    </view>

    <view class='remind' bindtap='loadMore' data-alias="{{alias}}" data-name="{{name}}" data-ctype="{{ctype}}" wx:if="{{state==1}}"><text class="more">↓加载更多↓</text></view>

     <view class='remind' wx:if="{{state==0}}"><text class="none">没有更多数据^_^</text></view>

  </view>


//js

/**

  * 生命周期函数--监听页面加载

  */

onLoad: function (options) {

var mythis = this;

var alias = options.alias;

var name = options.name;

var ctype = options.ctype;

this.setData({

  alias: alias,

  name: name,

  ctype: ctype,

})

getarticlelist(this.data.pagesize, this.data.p, mythis, alias, name, ctype) //获取列表

},

 

/**

     * 点击加载更多时触发

     */

loadMore: function (e) {

      var mythis = this;

      var alias = e.currentTarget.dataset.alias;

      var name = e.currentTarget.dataset.name;

      var ctype = e.currentTarget.dataset.ctype;

      /*wx.showLoading({

        title: '玩命加载中...',

      });*/

      mythis.data.p = mythis.data.p + 1;


      //console.log(this.data.p);

      getarticlelist(this.data.pagesize, this.data.p, mythis, alias, name, ctype)

      wx.hideLoading();

},


/**

 * 获取文章列表

 */

function getarticlelist(pagesize, p, mythis, alias, name, ctype='') {

  //console.log(ctype);

  if(p=='0' || (p=='1' && ctype==''))  mythis.data.allProject = [];

  wx.request({

    url: 'https://ittxx.cn/api/XXX?cat=' + alias + '&p=' + p + '&pagesize=' + pagesize + '&ctype=' + ctype,

    method: 'GET',

    data: {

      pagesize: pagesize,

      p: p,

      alias: alias,

      name: name,

      ctype: ctype,

    },

    header: {

      'content-type': 'application/x-www-form-urlencoded'

    },

    success: function (res) {//如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0

      //if (res.data.message == 'success') {

          console.log(res.data.length);

          if (res.data.length < pagesize && p > 1)

          mythis.setData({

            state: 0

          });

          //console.log(mythis.data.pagesize);

          var state1 = 1;//如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载

          if (res.data.length < mythis.data.pagesize)

            var state1 = 0;

          //循环将结果集追加到数组后面

          if(ctype !='' && p ==0){

            mythis.data.allProject = [];

            for (var i = 0; i < res.data.length; i++) {

              mythis.data.allProject.push(res.data[i]);

            }

            mythis.setData({

              p:1,

            });

          }

          else{

            for (var i = 0; i < res.data.length; i++) {

              mythis.data.allProject.push(res.data[i]);

            }

          }

          mythis.setData({

            arrayProject: mythis.data.allProject,

            state: state1

          });

        

      //}

      //console.log(mythis.data.arrayProject)

    },


    fail: function (res) {

      console.log(res);

    }

  });

}


效果:请关注ittxxcn小程序并查看文章列表

xiaochengxu.jpg


参考网址:

https://www.cnblogs.com/lishuang2243/p/11142999.html

https://blog.csdn.net/liumude123/article/details/80401175 

https://www.h5w3.com/18391.html 

https://blog.csdn.net/qq_38882327/article/details/92627805 


转载请注明: ITTXX.CN--分享互联网 » 小程序上拉加载和点击加载更多实例

最后更新:2020-06-02 17:30:30

赞 (3) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽