本篇文章给大家带来的内容是关于微信小程序功能实现：上滑加载下拉刷新，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
之前谈到文章列表的数据加载，是一次性全部加载，这样是不友好的。这章介绍加载和刷新。
先介绍在ide中，怎么模拟上滑这个操作。开始我是用鼠标点击文章列表，然后先上移动。结果一直没有结果，以为是代码写的有问题。其实并不是，上滑，下拉这个操作，只需要用鼠标的滚轮即可。
首先，我们先完成上滑和下拉这个功能。
list.wxml文件：
<view class="page"> <view class="page__bd"> <!--用name 定义模版--> <template name="msgtemp"> <!-- 1. scaletofill : 图片全部填充显示，可能导致变形 默认 2. aspectfit ： 图片全部显示，以最长边为准 3. aspectfill ： 图片全部显示，以最短边为准 4. widthfix ： 宽不变，全部显示图片 --> <view class="weui-panel__bd"> <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> <view class="weui-media-box__hd weui-media-box__hd_in-appmsg"> <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/> </view> <view class="weui-media-box__bd weui-media-box__bd_in-appmsg"> <view class="weui-media-box__title">{{title}}</view> <view class="weui-media-box__desc">{{time}}</view> </view> </navigator> </view> </template> <scroll-view scroll-top="{{scrolltop}}" style="height: {{windowheight}}px; width: {{windowwidth}}px;" scroll-y="true" bindscrolltoupper="pulldownrefresh" bindscroll="scroll" bindscrolltolower="pullupload" class="weui-panel weui-panel_access"> <view class="weui-panel__hd">文章列表</view> <view wx:for-items="{{msglist}}" wx:key="{{item.id}}"> <view class="kind-list__item"> <!--用is 使用模版--> <template is="msgtemp" data="{{...item}}"/> </view> </view> </scroll-view> <view> <loading hidden="{{hidden}}" bindchange="loadingchange"> 加载中... </loading> </view> </view> <view class="page__ft"> </view></view>
在原来的基础上，多用了一个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.jsvar 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。
这样加载和刷新就完成了，虽然对刷新很不满意，网上找了很多例子都是这样，如果有好的效果，请赐教。
相关推荐：
微信小程序中的下拉刷新和上拉加载的实现方法详解
微信小程序实现下拉加载和上拉刷新详细讲
以上就是微信小程序功能实现：上滑加载下拉刷新的详细内容。