微信小程序页面滑动屏幕加载数据的实例详解

这篇文章主要为大家详细介绍了微信小程序页面滑动屏幕加载数据效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

滑动屏幕加载数据是任何小程序中都会用到的功能，本文我就将这个功能整理给大家，希望对大家有意。我们先看看效果图：

创建目录

首先我们现在项目中创建资讯目录，以下是我自己创建的目录，大家可以根据自己的需求创建。如图所示：

创建lists.js文件

以下是lists.js代码

var app = getApp()
Page({
 data: {
 newsList: [],
 lastid: 0,
 toastHidden: true,
 confirmHidden: true,
 isfrist: 1,
 loadHidden: true,
 moreHidden: #39;none #39;,
 msg: #39;没有更多文章了 #39;
 loadData: function (lastid) {
 //显示出加载中的提示
 this.setData({ loadHidden: false })
 var limit = 10
 var that = this
 wx.request({
 url: #39;http://127.0.0.1:9090/hpm_bill_web/news/getnewslist #39;, //数据接口
 data: { lastid: lastid, limit: limit },
 header: {
 #39;Content-Type #39;: #39;application/json #39;
 success: function (res) {
 if (!res.data) {
 that.setData({ toastHidden: false })
 that.setData({ moreHidden: #39;none #39; })
 return false
 var len = res.data.length
 var oldLastid = lastid
 if(len != 0) {
 that.setData({ lastid: res.data[len - 1].id })
 } else {
 that.setData({ toastHidden: false})
 var dataArr = that.data.newsList
 var newData = dataArr.concat(res.data);
 if (oldLastid == 0) {
 wx.setStorageSync( #39;CmsList #39;, newData)
 that.setData({ newsList: newData })
 that.setData({ moreHidden: #39; #39; })
 fail: function (res) {
 if (lastid == 0) {
 var newData = wx.getStorageSync( #39;CmsList #39;)
 if(newData) {
 that.setData({ newsList: newData })
 that.setData({ moreHidden: #39; #39; })
 var len = newData.length
 if (len != 0) {
 that.setData({ lastid: newData[len - 1].id })
 } else {
 that.setData({ toastHidden: false })
 console.log( #39;data from cache #39;);
 } else {
 that.setData({ toastHidden: false, moreHidden: #39;none #39;, msg: #39;当前网格异常，请稍后再试 #39; })
 complete: function () {
 //显示出加载中的提示
 that.setData({ loadHidden: true })
 loadMore: function (event) {
 var id = event.currentTarget.dataset.lastid
 var isfrist = event.currentTarget.dataset.isfrist
 var that = this
 wx.getNetworkType({
 success: function (res) {
 var networkType = res.networkType // 返回网络类型2g，3g，4g，wifi
 if (networkType != #39;wifi #39; isfrist == #39;1 #39;) {
 that.setData({ confirmHidden: false })
 this.setData({ isfrist: 0 })
 this.loadData(id);
 onLoad: function () {
 var that = this
 this.loadData(0);
 toastChange: function () {
 this.setData({ toastHidden: true })
 modalChange: function () {
 this.setData({ confirmHidden: true })
})

创建页面文件（lists.wxml）

 view >
创建页面样式（lists.wxss）
.warp {height:100%;display:flex;flex-direction: column;padding:20rpx;}
navigator {overflow: hidden;}
.list {margin-bottom:20rpx;height:200rpx;position:relative;}
.imgs{float:left;}
.imgs image {display:block;width:200rpx;height:200rpx;}
.infos {float:left;width:480rpx;height:200rpx;padding:20rpx 0 0 20rpx}
.title {font-size:20px; font-family: Microsoft Yahei}
.dates {font-size:16px;color: #aaa; position: absolute;bottom:0;}
.loadMore {text-align: center; margin:30px;color:#aaa;font-size:16px;}
通过以上代码就能实现在屏幕上滑动显示数据的功能。
以上就是微信小程序页面滑动屏幕加载数据的实例详解的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！