微信小程序实现滚动加载更多

1.所需组件和应用编程接口

滚动视图(可滚动视图区域)

显示消息提示窗口——用于显示加载《一个叫秋花的人》。

2.要使用的属性

3 . scroll-view需要指定一个高度，可以根据自己的要求进行计算。我使用可用的屏幕高度，默认页面显示6。

4.滚动到底部以绑定要触发的事件。

scroll-view scroll-y=' true ' style=' height : { { height } } px ' bindskollellower=' lower ' 5。操作事件函数主要是将请求的数据与concat方法结合，赋值。我使用for循环来假装添加数据，在实际项目中可以用我自己的ajax来代替，并加载我进行模拟。

lower(){ var result=this . data . RES；var ReSarr=[]；//可以使用自己的ajax进行(让I=0；i 10I){ ReSarr . push(I)；};var cont=result . concat(ReSarr)；//合并请求的数据console . log(ResArr . length)；If(续)长度=100) {wx。show toast({//句号，可以加一个过度弹出框表示“加载”标题：‘我也有底线’，Icon3360成功’，时长3360 300 })；返回false} else {wx.showLoading({ //期间可以增加过多的弹出框提示“Loading”title :‘Loading’，icon :‘Loading’，})；setTimeout(()={ this . setdata({ RES : cont })；wx . HideLoadIng()；}, 1500)} }6.成功后，完整的代码可以直接复制运行。

Wxml代码

class=' box ' scroll-view scroll-y=' true ' style=' height : { { height } } px ' bindscrolltolower=' lower ' view wx : for=' { { RES } } ' data-id=' { { index } } ' wx : key=' { { index } } ' style=' height : {(height/6)-1 } } px；宽度：100%；文本对齐：居中；line-height : { {(height/6)-1 } } px；边框-底部：1 pxsolid # CCC“{ item }”视图滚动-视图视图js代码

page({/* * * page */data 3360的初始数据{height 3360 ' '，res3360 [0，1，2，3，4，5，6，7，8，9])，lower(){ var result=this . data . RES；var ReSarr=[]；for(设I=0；i 10I){ ReSarr . push(I)；};var cont=result . concat(ReSarr)；console . log(ReSarr . length)；If(续)长度=100) {wx。show toast({//如果所有的加载都完成了，也请打个框标题：‘我也有底线’，Icon3360成功’，时长3360 300 })；返回false} else {wx.showLoading({ //期间可以增加过多的弹出框提示“Loading”title :‘Loading’，icon :‘Loading’，})；setTimeout(()={ this . setdata({ RES : cont })；wx . HideLoadIng()；}，1500)}，/* *生命周期函数-监视页面加载*/onload:函数(选项){ wx . getsystem info({ Success :(RES)={ this . setdata({ height 3360 RES . window height })} }