页面代码

<view class="fp_box">
<!--等待框-->
<view class="load_style" hidden="{{!loading}}"><image src="/img/common/load.png"></image><view>加载中...</view>
</view><view class="bor-top"><view class="fp_item_box" wx:for="{{fplist_data}}" wx:key="index"><view class="fp_top"><view class="fp_head"><image src="{{item.header}}"></image></view><view class="fp_count"><view class="cishu"><text>{{item.username}}</text><text>（共带看{{item.dkcount}}次）</text></view><view class="shijian">最新带看：{{item.dktime}}</view></view><view class="fp_lian"><view bindtap="dk_tel" data-index='{{index}}' id='{{item.handset}}'  class="tel_icon"><image src="/img/common/tel_icon.png"></image></view>      <view class="liao_icon"><image src="/img/common/mes_icon.png"></image></view></view></view><view class="fp_con">{{item.memo}}</view></view></view></view>

js

    /*** 页面的初始数据*/data: {loading: true,//房源iddetailId: '',//城市idcityId: '',currentTab: 0,page_num: 1, //默认页码totalpage:0, //总页数 listLock: 1,//列表翻页锁，防止数据不够时翻页报错fplist_data: [],//数据},

    onLoad: function (options) {this.setData({detailId: options.houseId,cityId: options.cityId})  this.getData(options);},

获取数据

    //数据getData: function () {var that = this;// that.setData({//     detailId: options.houseId,//     cityId: options.cityId// })var page_size = 15;var page_data = { page: that.data.page_num, pcount: page_size };var houseid = {  hid: that.data.detailId,有其他参数可以直接传到这里，没有就不写}var post_data = Object.assign(page_data, houseid);//拼接jsonwx.request({url: '接口连接' + that.data.cityId + '/v1/brokerinfolist',//json数据地址//url: '接口连接' + that.data.cityId + '/v1/brokerinfolist' + '?orderrule=2',//json数据地址data: post_data,method: "post",//get时用//headers: { 'Content-Type': 'application/json' },//post时用header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },success: function (res) {if (res.data.status == 200) {  console.log('totalCount : ', res.data.data.totalCount)     if (res.data.data.totalCount == 0) {console.log(0);that.setData({// listHidden: true,});} else if (res.data.data.totalCount < page_size) {console.log(res.data.data.totalCount, '小于', page_size)that.data.listLock = 2;that.setData({loading: false,fplist_data: res.data.data.list,});} else {that.data.listLock = 1;that.data.totalpage = Math.ceil(res.data.data.totalCount / page_size);console.log('totalpage', that.data.totalpage);if (that.data.totalpage >= that.data.page_num) {console.log('翻页之前数据', that.data.fplist_data) var listData = that.data.fplist_data.concat(res.data.data.list);console.log('翻页之后数据', that.data.fplist_data.concat(res.data.data.list))//为下一页的请求参数做准备that.setData({fplist_data: listData,loading: false,});// wx.hideLoading();that.data.page_num += 1; //页码增加，保证下次调用时为新的一页。console.log('翻页', that.data.page_num);console.log('setData', listData);}// else if (that.data.totalpage < that.data.page_num){//   console.log("没有新数据");//   that.data.listLock=2;// }}} else {that.data.listLock = 2;console.log('msg:', res.data.msg);//204无结果          that.setData({// listHidden: true,});}},fail: function (res) {console.log('error', res);},complete: function (res) {wx.hideLoading();// console.log('complete', res);}});},

加载更多

    /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {var self = this;console.log('totalpage', self.data.totalpage)console.log('page_num', self.data.page_num)if (self.data.totalpage < self.data.page_num) {console.log("没有新数据");self.setData({});self.data.listLock = 2;}if (self.data.listLock == 2) {return false;}wx.showLoading({ title: '加载中', icon: 'loading', duration: 10000 });self.getData(self.data);},

json格式

{
"status": "200",
"msg": "OK",
"isPC": 1,
"data": {
"totalCount": 16,
"list": [{"memo": "test","userid": 590559,"username": "王wang","handset": "13211111","netbrokerscore": "6890","header": "图片链接","id": "590559","shopname": "交道口店","nx": 6,"dkcount": 3,"dktime": "2019-06-28","housesid": "500139405","job_leave": "1","esid": "720859","havereport": 1,"brokertag": ""}]}
}

最终效果

小程序列表页分页获取数据，下滑加载更多相关推荐

微信小程序列表页分页加载功能
微信小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面. 代码如下: wxml代码 ...
小程序实现下拉刷新和上拉加载更多
1.逻辑要点下拉刷新逻辑: 下拉后发送网络请求,获取第一页数据数据获取成功后清空本地数据加载第一页数据上拉加载更多: 根据当前页码和总页码进行比较,如果当前页码>=总页码,则不请求数据 ...
微信小程序实战篇-下拉刷新与加载更多
下拉刷新实现下拉刷新目前能想到的有两种方式调用系统的API,系统有提供下拉刷新的API接口下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
微信小程序 onReachBottom 上拉滚动到底部加载更多问题
onReachBottom 小程序官方有一个onReachBottom上滑到底部执行的函数,但是当使用时发现不起作用.查了写资料发现需要在json里面配置: 1,"enablePullDow ...
小程序列表页进入详情页
小程序列表页进入详情页从列表页进入详情页,通过使用本地存储来实现,当我点击的时候,拿到这个索引,并且获取整个对象,存入内存中,然后在详情页onload中get拿到这个数据,放到页面进行展示 1.1 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
【微信小程序】实现小程序下拉刷新与上拉加载
微信小程序内置的上拉加载.下拉刷新与Android原生的有所不同,Android原生下拉刷新用SwipeRefreshLayout组件,重写onRefresh方法,而上拉加载则是使用RecycleVi ...

小程序列表页分页获取数据，下滑加载更多

js

获取数据

加载更多

json格式

小程序列表页分页获取数据，下滑加载更多相关推荐

最新文章

热门文章