微信小程序页面滑屏加载数据示例(微信小程序动态加载页面)

本文主要详细介绍了微信小程序页面滑屏加载数据的效果，有一定的参考价值。感兴趣的朋友可以参考一下。

滑动屏幕加载数据是任何小程序都会用到的功能。在本文中，我将为您整理这个功能，希望您会感兴趣。我们先来看看效果图:

创建目录

首先，我们在项目中创建信息目录。以下是我自己创作的目录。你可以根据自己的需求来创建。如图所示:

创建lists.js文件

以下是lists.js代码

var app = getApp()Page({ data:{ newsList:[]，lastid: 0，toastHidden: true，confirmHidden: true，isfrist: 1，loadHidden: true，more hidden:& # 039；无& # 039；，消息:& # 039；没有更多的文章& # 039；}、loadData: function (lastid) {//显示提示this . setdata({ load hidden:false })var limit = 10 var that = this wx . request({ URL:& # 039；http://127 . 0 . 0 . 1:9090/HPM _ bill _ web/news/get news list & # 039；，//数据接口数据:{lastid: lastid，limit: limit}，头:{ & # 039；content -Type & # 039；: '应用程序/JSON & # 039；}，success: function (res) { if(！RES . data){ that . setdata({ toastHidden:false })that . setdata({ more hidden:& # 039；无& # 039；})返回false } var len = RES . data . length var old lastid = lastid if(len！= 0){ that . setdata({ lastid:RES . data[len -1])。id })} else { that . setdata({ toastHidden:false })} var data arr = that . data . newslist var new data = data arr . concat(RES . data)；if(old lastid = = 0){ wx . setstoragesync(& # 039；CmsList & # 039，new data)} that . setdata({ news list:new data })that . setdata({ more hidden:& # 039；'}) }，fail:function(RES){ if(lastid = = 0){ var new data = wx . getstoragesync(& # 039；CmsList & # 039)if(new data){ that . setdata({ news list:new data })that . setdata({ more hidden:& # 039；'}) var len = newData.length if (len！= 0){ that . setdata({ lastid:new data[len -1])。id })} else { that . setdata({ toastHidden:false })} console . log(& # 039；缓存中的数据& # 039；);} } else { that . setdata({ toastHidden:false，more hidden:& # 039；无& # 039；，消息:& # 039；当前网格异常，请稍后再试& # 039；}}}，complete:function(){//在加载中显示提示that . setdata({ load hidden:true } } }，load more:function(event){ var id = event . current target . dataset . lastid var is frist = event . current target . dataset . is frist var that = this wx . getnetwork type({ success:fun Action(RES){ var network type = RES . network type//返回网络类型2g、3g、4g、wifi if (networkType！= 'wifi & # 039& amp& ampisfrist = = & # 0391'){ that . setdata({ confirm hidden:false })} } })this . setdata({ is frist:0 })this . loaddata(id)；}，onLoad:function(){ var that = this this . load data(0)；}、toast变更:function(){ this . setdata({ toast hidden:true })}、modal变更:function(){ this . setdata({ confirm hidden:true } } })创建页面文件(lists.wxml)

& ltview class = & quotwarp & quot& gt& lt！--文章列表模板begin -->:& lt；模板名称= & quot项目& quot& gt& lt导航器url = & quot../../页面/细节/细节？id = { { id } } & quothover -class = & quot；导航-悬停& quot& gt& ltview class = & quotimgs & quot& gt& ltimage src = & quot{ { image } } & quotclass = & quotin-img & quot；background -size = & quot；封面& quotmodel = & quotscaleToFill & quot& gt& lt/image & gt；& lt/view & gt；& ltview class = & quotinfos & quot& gt& ltview class = & quot标题& quot& gt{ { name } } & lt/view & gt；& ltview class = & quot日期& quot& gt{ { createtime } } & lt/view & gt；& lt/view & gt；& lt/navigator & gt；& lt/template & gt；& lt！--文章列表模板end -->:& lt；！--循环输出列表begin -->:& lt；查看wx:for = & quot；{ {新闻列表} } & quotclass = & quot列表& quot& gt& lt模板是= & quot项目& quotdata = & quot{{...item } } & quot/& gt；& lt/view & gt；& lt！--循环输出列表end -->:& lt；正在加载hidden = & quot{ { loadHidden } } & quotbindchange = & quot负载变化& quot& gt加载数据...

。翘曲{高度:100%；显示器:flexflex -方向:列；填充:20rpx}导航器{溢出:隐藏；}.list { margin -bottom:20 rpx；身高:200rpx位置:相对；}.imgs { float:left；}.imgs图像{显示:块；宽度:200rpx身高:200rpx}.infos { float:left；宽度:480rpx身高:200rpx填充:20rpx 0 0 20rpx}。title { font -size:20px；font -家族:微软雅黑}。日期{ font -size:16px；颜色:# aaa位置:绝对；底部:0；}.load more { text -align:center；边距:30px颜色:# aaafont -大小:16px}通过上面的代码可以实现在屏幕上滑动显示数据的功能。