Home > Article > WeChat Applet > Detailed explanation of an example of sliding the screen to load data on the WeChat applet page
This article mainly introduces in detail the effect of sliding screen loading data on the WeChat applet page, which has certain reference value. Interested friends can refer to it
The sliding screen loading data is any small program There are functions that are commonly used in the program. In this article, I will organize this function for everyone. I hope it will be interesting to everyone. Let’s take a look at the renderings first:
Create directory
First we create an information directory in the project. The following is what I created myself Directory, you can create it according to your own needs. As shown in the picture:
Create lists.js file
The following is the lists.js code
var app = getApp() Page({ data: { newsList: [], lastid: 0, toastHidden: true, confirmHidden: true, isfrist: 1, loadHidden: true, moreHidden: 'none', msg: '没有更多文章了' }, 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, moreHidden: 'none', 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 }) } })
Create page file (lists.wxml)
{{name}} {{createtime}} 数据加载中... 加载更多 {{msg}} 你当前不在在WIFI网格下下,会产生流量费用
Create page style (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;}
Through the above code, you can realize the function of sliding and displaying data on the screen.
The above is the detailed content of Detailed explanation of an example of sliding the screen to load data on the WeChat applet page. For more information, please follow other related articles on the PHP Chinese website!