微信小程序之加载更多（分页加载）实例

1.业务需求：列表滚动到底部时，继续往上拉，加载更多内容
2.必传参数：
（1）page: 1 //第几次加载
（2）limit: 5//每次加载的显示数据条数
（3）total: null //需要返回数据的个数
3.其他参数：
根据接口的传所需参数
4.实现原理：
当第一次访问接口时，传递三个必备参数和其他参数（需要搜索的字符串）给后台，后台返回第一次数据过来。在请求成功的的回调函数中，判断返回的数据是否>0，是，则取出数据，渲染视图层，并把“上拉加载”显示在列表底部；否，则没有数据可取，并把“没有更多”显示在列表底部，同时把“上拉加载”隐藏掉。
当用户已经滚动到列表底部（这里使用到小程序提供的scroll-view组件的bindscrolltolower事件），触发bindscrolltolower事件，参数page+1，再把必传参数和其他参数（需要搜索的字符串）给后台，后台把其余的数据返回给前台，前台在原来数据的基础上添加数据。
代码示例如下：
wxml:

<!--pages/test/test.wxml-->
<view class="search"><view class="search-bar"><view class="search-wrap"><icon type="search" size="16" class="icon-search" /><input type="text" placeholder="请输入搜索内容" class="search-input" bindinput="bindKeywordInput" value="{{searchValue}}" bindfocus="bindinput" /></view><view class="search-cancel" bindtap="keywordSearch">搜索</view></view><view class="parkExplain">以下为资讯搜索的结果</view><!-- 资讯搜索结果展示 --><view class="informationView"><scroll-view scroll-y="true" bindscrolltolower="searchScrollLower" class="newsListView"><view class="newsList clearfix" wx:for="{{newsList}}" wx:key="index"><image class="newsImgStyle" src="{{item.listImg}}"></image><text class="newsTitleStyle">{{item.newsTitle}}</text></view><view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view><view class="loading complete" hidden="{{!searchLoadingComplete}}">已加载全部</view></scroll-view></view>
</view>

wxss:

/* pages/test/test.wxss */
page{display: flex;flex-direction: column;height: 100%;
}/*搜索*/
.search{flex: auto;display: flex;flex-direction: column;background: #fff;
}
.search-bar{flex: none;display: flex;align-items: center;justify-content: space-between;padding: 20rpx;background: #f4f4f4;
}
.search-wrap{position: relative;flex: auto;display: flex;align-items: center;height: 80rpx;padding: 0 20rpx;background: #fff;border-radius: 6rpx;
}
.search-wrap .icon-search{margin-right: 10rpx;
}
.search-wrap .search-input{flex: auto;font-size: 28rpx;
}
.search-cancel{padding: 0 20rpx;font-size: 28rpx;
}/*搜索结果*/
.informationView {width: 100%;
}
.parkExplain {width: 100%;text-align: center;color: #999;font-size: 30rpx;font-weight: 600;margin-bottom: 20rpx;
}
.informationView .newsListView {width: 100%;border-radius: 28rpx;height: 920rpx;overflow: auto;
}
.informationView .newsListView .newsList {width: 100%;margin-top: 24rpx;border-bottom: 2rpx solid rgba(182, 182, 182, .3);padding-bottom: 18rpx;height:180rpx;
}
.informationView .newsListView .newsList:nth-child(1) {margin-top: 0rpx;
}
.informationView .newsListView .newsList:nth-last-child(1) {border-bottom: none;padding-bottom: 0rpx;
}
.newsListView .newsList .newsImgStyle {width: 150rpx;height: 150rpx;float: left;
}
.newsListView .newsList .newsTitleStyle {width: 73%;height: 150rpx;line-height: 73rpx;float: left;margin-left: 24rpx;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}
.applicationView .textStyle {font-size: 28rpx;font-weight: 600;
}
.backImgStyle {width: 50rpx;height: 50rpx;position: absolute;top: 10rpx;left: 0;cursor: pointer;
}
/* 加载更多样式 */
.loading{padding: 10rpx;text-align: center;display:flex;justify-content: center;align-items: center;color: #999999;
}
.loadingIcon{width: 40rpx;height: 40rpx;
}
.loading.complete:before{  display: none;
}

js:

// pages/test/test.js
const Api = require('../../utils/common')
Page({/*** 页面的初始数据*/data: {searchValue: '',//需要搜索的字符newsList: [],//放置返回数据的数组isFromSearch: true,   // 用于判断newsList数组是不是空数组，默认true，空的数组page: 1,   // 设置加载的第几次，默认是第一次limit: 5, // 每次加载的数据条数total: null,      //返回数据的个数(可以传空)searchLoading: false, //"上拉加载"的变量，默认false，隐藏searchLoadingComplete: false  //“没有数据”的变量，默认false，隐藏},
//输入框事件，每输入一个字符，就会触发一次
bindKeywordInput(e){this.setData({searchValue: e.detail.value})
},
bindInput() {this.setData({searchValue: '',})
},//点击搜索按钮，触发事件keywordSearch: function(e){this.setData({page: 1,   //第一次加载，设置1newsList:[],  //放置返回数据的数组,设为空isFromSearch: true,  //第一次加载，设置truesearchLoading: true,  //把"上拉加载"的变量设为true，显示searchLoadingComplete:false //把“没有数据”设为false，隐藏})this.informationQuery();
},
// 请求数据
informationQuery() {const params = {content: this.data.searchValue,page: this.data.page,limit: this.data.limit}console.log(params);const url = `${Api.api.informationQuery}`Api.request({url: url, data:params}).then(res => {if(res.code == 0) {var _res = res.data;//判断是否有数据，有则取数据  if(_res.news.length > 0){let searchList = [];//如果isFromSearch是true从data中取出数据，否则先从原来的数据继续添加this.data.isFromSearch ? searchList = _res.news : searchList= this.data.newsList.concat(_res.news)this.setData({newsList: searchList, //获取数据数组searchLoading: true   //把"上拉加载"的变量设为false，显示  });  //没有数据了，把“没有数据”显示，把“上拉加载”隐藏  }else{this.setData({searchLoadingComplete: true, //把“没有数据”设为true，显示 searchLoading: false  //把"上拉加载"的变量设为false，隐藏  });  }  } else {wx.showToast({title: response.msg,icon: 'error',})}})
},
//滚动到底部触发事件
searchScrollLower: function(){let that = this;if(that.data.searchLoading && !that.data.searchLoadingComplete){that.setData({page: that.data.page+1,  //每次触发上拉事件，把page+1isFromSearch: false  //触发到上拉事件，把isFromSearch设为为false});that.informationQuery();}
}
})

效果如下：

微信小程序之加载更多（分页加载）实例相关推荐

微信小程序云数据库触底分页加载，下拉无限加载，第一次请求数据随机，随机获取数据库的数据
效果图小程序云开发分页加载代码  <view class="pageTitle">家 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)
文章目录导航路线小程序的启动过程小程序页面渲染的过程小程序中组件的分类有九大类常用的视图容器类组件小程序宿主环境-API 导航路线关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有 ...
微信小程序云开发之数据分页云函数
微信小程序云开发之数据分页云函数 2018-10-06 20:23:28 微信小程序的云开发可以自己对数据库进行操作而不需要后台,那么很常见的一个功能就是我们在读取数据的时候需要分页来获取 ...
微信小程序云数据库中实现分页
微信小程序提供skip来实现分页比如数据库中有数据100条 db.collection('story').skip(0).limit(10).get() 而skip就是第skip+1条,比如skip ...
小程序滑动到底部进行分页的功能实例
功能实例:实现小程序滚动到底部进行翻页的功能适用范围:所有的微信小程序版本我们在做分页的时候可以使用scroll-view的标签进行开发,通过给他设置宽高来达到滑动的效果,以下是代码片段. wxm ...
微信小程序下拉刷新/上拉加载更多（上拉加载更多怎么实现）
参考:微信小程序开发文档->框架>逻辑层->注册页面实现原理: 1.下拉刷新:由于小程序数据是实时渲染的.我们把data{}内的数据清空重新加载即可实现下拉刷新. 2.上拉加载更多 ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...

微信小程序之加载更多（分页加载）实例

微信小程序之加载更多（分页加载）实例相关推荐

最新文章

热门文章