【移動應用開發(fā)技術】微信小程序功能上滑加載下拉刷新

【移動應用開發(fā)技術】微信小程序功能上滑加載下拉刷新

這篇文章主要介紹了微信小程序功能上滑加載下拉刷新，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。

本篇文章給大家?guī)淼膬热菔顷P于微信小程序功能實現(xiàn)：上滑加載下拉刷新，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。之前談到文章列表的數(shù)據加載，是一次性全部加載，這樣是不友好的。這章介紹加載和刷新。先介紹在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（官方文檔：/debug/wxadoc/dev/component/scroll-view.html）

我是加載文章列表的上面，第一步：要設置允許它縱向滾動scroll-y=true，第二步：要給一個固定高度，文檔中也明確要求了這點。這里是動態(tài)獲取手機配置的高度和寬度。第三步：要設置bindscrolltoupper（下拉）和bindscrolltolower（上滑）響應的方法。第四步：要設置scroll-top（用于定位）和bindscroll（滾動的時候執(zhí)行，和前者一起用可達到定位效果）第五步：加載頁面icon設置，直接copy即可。list.js文件：//

pages/list/list.js

var

app

=

getApp();

//

當前頁數(shù)

var

pageNum

=

1;

//

加載數(shù)據

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為頁面跳轉所帶來的參數(shù)

var

that

=

this;

wx.getSystemInfo({

success:

function(res)

{

that.setData(

{

windowHeight:

res.windowHeight,

windowWidth:

res.windowWidth

})

}

});

loadMsgData(that);

},

onReady:function(){

//

頁面渲染完成

},

onShow:function(){

//

頁面顯示

},

//

下拉刷新數(shù)據

pullDownRefresh:

function()

{

var

that

=

this;

pageNum

=

1;

that.setData({

msgList

:

[],

scrollTop

:

0

});

loadMsgData(that);

},

//

上拉加載數(shù)據

上拉動態(tài)效果不明顯有待改善

pullUpLoad:

function()

{

var

that

=

this;

loadMsgData(that);

},

//

定位數(shù)據

scroll:function(event){

var

that

=

this;

that.setData({

scrollTop

:

event.detail.scrollTop

});

},

onHide:function(){

//

頁面隱藏

},

onUnload:function(){

//

頁面關閉

}

})第一點：如果對app.ajax.req里面的方法看不懂，可以參考：微信小程序request請求（有對應接口源碼）第二點：因為是分頁查詢，需要把上一次查詢內容保存，所以用list.push拼接。第三點：每次查詢后，頁數(shù)都要加一，并且加載前要顯示加載的icon，加載結束要隱藏。第四點：頁面加載初始化獲取設置信息，官方文檔：/debug/wxadoc/de