微信小程序页面滑动屏幕加载数据效果

前端之家收集整理的这篇文章主要介绍了微信小程序页面滑动屏幕加载数据效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

创建目录

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

创建lists.js文件

以下是lists.js代码

文章了' },loadData: function (lastid) { //显示出加载中的提示 this.setData({ loadHidden: false }) var limit = 10 var that = this wx.request({ url: 'http://127.0.0.1:9090/hpm_bill_web/news/getnewslist',//数据接口 data: { lastid: lastid,limit: limit },header: { 'Content-Type': 'application/json' },success: function (res) { if (!res.data) { that.setData({ toastHidden: false }) that.setData({ moreHidden: 'none' }) 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('CmsList',newData) } that.setData({ newsList: newData }) that.setData({ moreHidden: '' }) },fail: function (res) { if (lastid == 0) { var newData = wx.getStorageSync('CmsList') if(newData) { that.setData({ newsList: newData }) that.setData({ moreHidden: '' }) var len = newData.length if (len != 0) { that.setData({ lastid: newData[len - 1].id }) } else { that.setData({ toastHidden: false }) } console.log('data from cache'); } } else { that.setData({ toastHidden: false,msg: '当前网格异常,请稍后再试' }) } },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 != 'wifi' && isfrist == '1') { 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)

创建页面样式(lists.wxss)

通过以上代码就能实现在屏幕上滑动显示数据的功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/weapp/36844.html

猜你在找的微信小程序相关文章