微信小程序实现页面下拉刷新和上拉加载功能

本文通过一个例子说明微信小程序实现了页面下拉刷新和页面上拉加载的功能。分享给大家参考，如下：

网络手机或应用往往有下拉刷新和上拉加载这些功能。

如何在微信小程序中实现下拉刷新和上拉加载的功能？

实施思路：

1.监控接口的下拉刷新事件和上拉加载事件

Bindscrolltolower监视器上拉加载bindscrolltoupper监视器下拉刷新。2.在下拉刷新过程中清除数据列表，并为界面显示重新请求数据。

3.拉起并加载增量请求数据，增量增加数据列表，并显示增量界面

渲染：

实现代码：

瀑布. wxml:

！-pages/FAilure/FAilure . wxml-view style=' display : none ' image wx : for=' { { images } } ' wx : key=' id ' id=' { { item . id } } ' src=' http : { { item . pic } } ' bind load=' onimageLoad '/image/view scroll-view scroll-y=' true ' style=' height 3: { { scrolh } } px ' bind scroltollheight : { { item . height } } px '/image/view/view view class=' img _ item ' view wx : for=' { { col 2 } } ' wx : key=' id ' image src=' http : { { item . pic } } ' style=' width :100 '；height : { { item . height } } px '/image/view/view/view/scroll-view falls . js:

设col1H=0；设col2H=0；Page({ data: { scrollH: 0，imgWidth: 0，loadingCount: 0，images: []，col1: []，col2: [] }，onload : function(){ wx。get system info({ success 3360(RES)={ let ww=RES . window width；让wh=res.windowHeight设imgWidth=ww * 0.48让scrollH=whthis。setdata({ scroll h : scroll h，imgWidth : imgWidth })；//加载首组图片这个。load images()；} }) }，PullDownRefresh : FuncTion(){ console。日志('页面下拉2');}，onshow : function(){ console。日志('页面显示');}, /** * 生命周期函数-监听页面隐藏*/onHide:函数(){ console.log('页面隐藏');}, /** * 用户点击右上角分享*/onsharepmessage : function(){ console。日志('点击分享');}，onImageLoad:函数(e){ let imageId=e . CurrentTarget。id；让oImgW=e . detail。宽度；//图片原始宽度让oImgH=e . detail。身高；//图片原始高度让imgWidth=这个。数据。imgWidth//图片设置的宽度let scale=imgWidth/oImgW；//比例计算设imgHeight=oImgH *刻度；//自适应高度让图像=这个。数据。图像；让imageObj=nullfor(设I=0；一。图像。长度；I){ let img=images[I]；if(img。id===imageId){ imageObj=img；打破；} } imageObj.height=imgHeight让加载计数=这个。数据。加载计数-1；让col 1=这个。数据。第1栏；让col 2=这个。数据。第2栏；//判断当前图片添加到左列还是右列if(col1H=col2H){ col1H=imgHeight；第一栏。push(imageObj)；} else { col2H=imgHeightcol 2。push(imageObj)；}让数据={加载计数：加载计数，列1:列1，列2:列2 }；//当前这组图片已加载完毕，则清空图片临时加载区域的内容if(！加载计数){数据。images=[]；} this.setData(数据);}，loadImages:函数(){ let images=[ { pic: '././images/1.png '，height: 0 }，{ pic: '././images/2.png '，height: 0 }，{ pic: '././images/3.png '，height: 0 }，{ pic: '././images/4.png '，height: 0 }，{ pic: '././images/5.png '，height: 0 }，{ pic: '././images/6.png '，height: 0 }，{ pic: '././images/7.png '，height: 0 }，{ pic: '././images/8.png '，height: 0 }，{ pic: '././images/9.png '，height: 0 }，{ pic: '././images/10.png '，height: 0 }，{ pic: '././images/11.png '，height: 0 }，{ pic: '././images/12.png '，height: 0 }，{ pic: '././images/13.png '，height: 0 }，{ pic: '././images/14.png '，高度： 0 }]；控制台。日志(' dasdad '图像)；let baseId=' img-'(new Date())；用于(设I=0；一。图像。长度；i ) { images[i].id=BaseID '-' I；}这个。setdata({加载计数：个图像。长度，图像：图像})；}})希望本文所述对大家微信小程序设计有所帮助。