您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序功能上滑加載下拉刷新,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于微信小程序功能實現(xiàn):上滑加載下拉刷新,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
之前談到文章列表的數(shù)據(jù)加載,是一次性全部加載,這樣是不友好的。這章介紹加載和刷新。
先介紹在IDE中,怎么模擬上滑這個操作。開始我是用鼠標(biāo)點擊文章列表,然后先上移動。結(jié)果一直沒有結(jié)果,以為是代碼寫的有問題。其實并不是,上滑,下拉這個操作,只需要用鼠標(biāo)的滾輪即可。
首先,我們先完成上滑和下拉這個功能。
list.wxml文件:
<view class="page"> <view class="page__bd"> <!--用name 定義模版--> <template name="msgTemp"> <!-- 1. scaleToFill : 圖片全部填充顯示,可能導(dǎo)致變形 默認(rèn) 2. aspectFit : 圖片全部顯示,以最長邊為準(zhǔn) 3. aspectFill : 圖片全部顯示,以最短邊為準(zhǔn) 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>
在原來的基礎(chǔ)上,多用了一個scroll-view (官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html) 我是加載文章列表的上面,
第一步:要設(shè)置允許它縱向滾動 scroll-y = true ,
第二步:要給一個固定高度,文檔中也明確要求了這點。這里是動態(tài)獲取手機配置的高度和寬度。
第三步:要設(shè)置bindscrolltoupper (下拉) 和 bindscrolltolower (上滑) 響應(yīng)的方法。
第四步:要設(shè)置 scroll-top (用于定位) 和 bindscroll (滾動的時候執(zhí)行,和前者一起用可達到定位效果)
第五步:加載頁面icon設(shè)置,直接copy即可。
list.js 文件:
// pages/list/list.js var app = getApp(); // 當(dāng)前頁數(shù) var pageNum = 1; // 加載數(shù)據(jù) 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); 相當(dāng)于list.push(list);打亂了結(jié)構(gòu) 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為頁面跳轉(zhuǎn)所帶來的參數(shù) var that = this; wx.getSystemInfo({ success: function(res) { that.setData( { windowHeight: res.windowHeight, windowWidth: res.windowWidth }) } }); loadMsgData(that); }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, // 下拉刷新數(shù)據(jù) pullDownRefresh: function() { var that = this; pageNum = 1; that.setData({ msgList : [], scrollTop : 0 }); loadMsgData(that); }, // 上拉加載數(shù)據(jù) 上拉動態(tài)效果不明顯有待改善 pullUpLoad: function() { var that = this; loadMsgData(that); }, // 定位數(shù)據(jù) scroll:function(event){ var that = this; that.setData({ scrollTop : event.detail.scrollTop }); }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關(guān)閉 } })
第一點:如果對 app.ajax.req 里面的方法看不懂,可以參考:微信小程序request請求 (有對應(yīng)接口源碼)
第二點:因為是分頁查詢,需要把上一次查詢內(nèi)容保存,所以用list.push 拼接。
第三點:每次查詢后,頁數(shù)都要加一,并且加載前要顯示加載的icon,加載結(jié)束要隱藏。
第四點:頁面加載初始化獲取設(shè)置信息,官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfoobject
第五點:下拉的邏輯,將頁數(shù)設(shè)置為一,并清空msgList 內(nèi)容,定位距頂部0px,最后調(diào)用加載數(shù)據(jù)的方法。
第六點:上滑的邏輯,直接調(diào)用。因為定位點在scorll方法中已經(jīng)賦值。
第七點:如果調(diào)用我的接口,是不能用appid的,需要重新創(chuàng)建一個項目,選擇無appid。
這樣加載和刷新就完成了,雖然對刷新很不滿意,網(wǎng)上找了很多例子都是這樣,如果有好的效果,請賜教。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序功能上滑加載下拉刷新”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。