本篇文章帶給大家的內容是關於微信小程式功能實作：上滑載入下拉刷新，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
之前談到文章列表的資料加載，是一次性全部加載，這樣是不友善的。這章介紹加載和刷新。
先介紹在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.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。
這樣載入和刷新就完成了，雖然對刷新很不滿意，網路上找了很多例子都是這樣，如果有好的效果，請賜教。
相關推薦：
微信小程式中的下拉刷新和上拉載入的實作方法詳解
微信小程式實作下拉載入和上拉刷新詳細講
#
以上是微信小程式功能實作：上滑載入下拉刷新的詳細內容。更多資訊請關注PHP中文網其他相關文章！
