小程序中,获取的数据是json格式时,不好直接追加至页面列表数组中绑定到页面,要做下处理,如下:
app.js中加处理方法:
//处理下页列表数据,追加至列表数据存储变量中
addList(oldData, newData) {
for (var item in newData) {
oldData.push(newData[item]);
}
return oldData;
},
test.wxml
<scroll-view scroll-y bindscrolltolower="scrollEnd" style='height:100vh;'>
<view wx:for="{{list}}" style='height:25vh;margin:25rpx;background-color:#eee;'>
{{item.title}}
</view>
<view wx:if="{{!ifHaveMore}}" style='text-align:center;color:#f00;'>我是有底线哒</view>
</scroll-view>
test.js
var app = getApp();
var canLoadNextPage = false;
Page({
data: {
pageSize: 1, //页码
ifHaveMore:true, //是否还有下一页
//list: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let This = this;
This.getListData(); //获取页面列表数据
},
//设置滚动到底部加载下一页数据
scrollEnd: function () {
let This = this;
if (This.data.ifHaveMore) {
//console.log('加载一下页');
if (!canLoadNextPage) {
return;
}
canLoadNextPage = false;
This.setData({
pageSize: This.data.pageSize + 1
});
This.getListData(); //获取页面列表数据
}
},
//获取页面列表数据
getListData: function () {
let This = this;
wx.showLoading({
title: '加载中',
})
//查询数据条件 所需参数
let dataJson = {
//type: '选择的类别',
page: This.data.pageSize, //页码
}
/*test*/
let res = {
status: 1,
ifHaveMore: This.data.pageSize > 2 ? false : true, //是否还有下一页
list: {
0: { id: '001', title: '第' + This.data.pageSize + '页 - 标题标题标题标题标题标题标题' },
1: { id: '002', title: '第' + This.data.pageSize + '页 - 标题标题标题标题标题标题标题' },
2: { id: '003', title: '第' + This.data.pageSize + '页 - 标题标题标题标题标题标题标题' },
3: { id: '004', title: '第' + This.data.pageSize + '页 - 标题标题标题标题标题标题标题' },
}
}
if (res.list != '') {
let oldData;
if (This.data.list != '' && This.data.pageSize > 1) {
oldData = This.data.list;
} else {
oldData = new Array();
}
let newData = app.addList(oldData, res.list);
This.setData({
ifHaveMore: res.ifHaveMore, //是否还有下一页
list: newData
});
canLoadNextPage = true;
} else {
This.setData({
ifHaveMore: res.ifHaveMore, //是否还有下一页
list: ''
});
canLoadNextPage = true;
}
setTimeout(function () {
wx.hideLoading();
}, 1000)
/*test*/
return;
//请求获取数据
wx.request({
url: '获取列表数据', //仅为示例,并非真实的接口地址
data: dataJson,
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
wx.hideLoading();
}
})
},
})