这篇文章主要介绍了微信小程序功能上滑加载下拉刷新，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联专注于偏关企业网站建设,响应式网站设计,电子商务商城网站建设。偏关网站建设公司,为偏关等地区提供建站服务。全流程按需策划设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务
本篇文章给大家带来的内容是关于微信小程序功能实现：上滑加载下拉刷新，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
之前谈到文章列表的数据加载，是一次性全部加载，这样是不友好的。这章介绍加载和刷新。
先介绍在IDE中，怎么模拟上滑这个操作。开始我是用鼠标点击文章列表，然后先上移动。结果一直没有结果，以为是代码写的有问题。其实并不是，上滑，下拉这个操作，只需要用鼠标的滚轮即可。
首先，我们先完成上滑和下拉这个功能。
list.wxml文件：
{{title}}
{{time}}
文章列表
加载中...
在原来的基础上，多用了一个scroll-view （官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html）
我是加载文章列表的上面，
第一步：要设置允许它纵向滚动 scroll-y = true ，
第二步：要给一个固定高度，文档中也明确要求了这点。这里是动态获取手机配置的高度和宽度。
第三步：要设置bindscrolltoupper （下拉） 和 bindscrolltolower （上滑） 响应的方法。
第四步：要设置 scroll-top （用于定位） 和 bindscroll （滚动的时候执行，和前者一起用可达到定位效果）
第五步：加载页面icon设置，直接copy即可。
list.js 文件：
// pages/list/list.js
var app = getApp();
// 当前页数
var pageNum = 1;
// 加载数据
var loadMsgData = function(that){
that.setData({
hidden:false
});
var allMsg = that.data.msgList;
app.ajax.req('/itdragon/findAll',{
"page":pageNum , "pageSize" : 6
},function(res){
// 不能直接 allMsg.push(res); 相当于list.push(list);打乱了结构
for(var i = 0; i < res.length; i++){
allMsg.push(res[i]);
}
that.setData({
msgList:allMsg
});
pageNum ++;
that.setData({
hidden:true
});
});
}
Page({
data:{
msgList:[],
hidden:true,
scrollTop : 0,
scrollHeight:0
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData( {
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
}
});
loadMsgData(that);
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
// 下拉刷新数据
pullDownRefresh: function() {
var that = this;
pageNum = 1;
that.setData({
msgList : [],
scrollTop : 0
});
loadMsgData(that);
},
// 上拉加载数据 上拉动态效果不明显有待改善
pullUpLoad: function() {
var that = this;
loadMsgData(that);
},
// 定位数据
scroll:function(event){
var that = this;
that.setData({
scrollTop : event.detail.scrollTop
});
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
第一点：如果对 app.ajax.req 里面的方法看不懂，可以参考：微信小程序request请求 （有对应接口源码）
第二点：因为是分页查询，需要把上一次查询内容保存，所以用list.push 拼接。
第三点：每次查询后，页数都要加一，并且加载前要显示加载的icon，加载结束要隐藏。
第四点：页面加载初始化获取设置信息，官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject
第五点：下拉的逻辑，将页数设置为一，并清空msgList 内容，定位距顶部0px，最后调用加载数据的方法。
第六点：上滑的逻辑，直接调用。因为定位点在scorll方法中已经赋值。
第七点：如果调用我的接口，是不能用appid的，需要重新创建一个项目，选择无appid。
这样加载和刷新就完成了，虽然对刷新很不满意，网上找了很多例子都是这样，如果有好的效果，请赐教。
感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序功能上滑加载下拉刷新”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
网站名称：微信小程序功能上滑加载下拉刷新
转载注明：
http://kswjz.com/article/isheod.html
