小程序首页获取数据给数组赋值,实现加载更多,以及遇到的坑
2023-09-14 09:07:44 时间
<!-- wxml--> <view> <view class="refreshTip" wx:if="{{refreshCompeleted==true}}">刷新成功</view> <news-list-item wx:for="{{newsList}}" news="{{item}}" wx:key="item.id"></news-list-item> <view class="weui-loadmore" wx:if="{{loading===true}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">加载中</view> </view> <view class="weui-loadmore" wx:if="{{loadingCompeleted===true}}"> <view class="weui-loadmore__tips">加载完成</view> </view> <view class="weui-loadmore weui-loadmore_line" wx:if="{{noData===true}}"> <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无数据</view> </view> </view>
不能直接把后台返回的数组数据赋值到定义的空数组中,一定要concat连接,否则结果是看似是个数组,但是获取到的该数组却为空,导致第一次上拉加载更多的时候是拿到的之前的数组依然是空数组。
var config = require('../../config')
var util = require('../../utils/util.js')
Component({
properties: {
category: {
type: String,
value: "index"
},
params: {
type: String,
value: ""
},
},
data: {
newsList: [],
page: 0,
size: 10,
totalPages: 0,
refreshCompeleted: false,
loadingCompeleted: false,
loading: false,
noData: false
},
methods: {
getList() {
let that = this;
that.setData({
page: 0
})
if (that.data.category === "index") {
util.get(`${config.service.host}/web/news/list_with_pub_info?channelId=${config.channelId}&page=0&size=${that.data.size}`, function(res) {
res.data.content.filter((value) => {
return value.createAt = util.formatTimeDistance(new Date(value.createAt))
})
let newsList = that.data.newsList.concat(res.data.content);//这里要特别注意,不能直接that.setData({newsList:res.data.content}) ,见下面注释
that.setData({
newsList: newsList,
totalPages: res.data.totalPages,
})
if (res.data.content.length = 0) {
that.setData({
noData: true
})
}
if (res.data.content.length !== 0 && that.data.page + 1 == that.data.totalPages) {
that.setData({
loadingCompeleted: true,
loading: false,
noData: false
})
}
setTimeout(function() {
that.setData({
refreshCompeleted: true
})
}, 1000)
setTimeout(function() {
that.setData({
refreshCompeleted: false
})
}, 2000)
}, function(e) {
console.log(JSON.stringify(e));
});
} else if (that.data.category === "search") {
util.get(`${config.service.host}/web/news/search_in_channel_with_pub_info?channelId=${config.channelId}&page=${that.data.page}&size=${that.data.size}&q=${that.data.params}`, function(res) {
res.data.content.filter((value) => {
value.createAt = util.formatTimeDistance(new Date(value.createAt));
let keyword = that.data.params;
let re = new RegExp(keyword, "g");
value.title = value.title.replace(re, `<span class="keyword">${keyword}</span>`);
return value
})
let newsList = that.data.newsList.concat(res.data.content);
that.setData({
newsList: newsList,
totalPages: res.data.totalPages,
})
console.log(res.data.content.length)
if (res.data.content.length === 0) {
that.setData({
noData: true
})
}
if (res.data.content.length !== 0 && that.data.page + 1 == that.data.totalPages) {
that.setData({
loadingCompeleted: true,
loading: false,
noData: false
})
}
setTimeout(function() {
that.setData({
refreshCompeleted: true
})
}, 1000)
setTimeout(function() {
that.setData({
refreshCompeleted: false
})
}, 2000)
}, function(e) {
console.log(JSON.stringify(e));
});
} else if (that.data.category === "professor") {
util.get(`${config.service.host}/web/news/list_by_follow_with_pub_info?pubId=${that.data.params}&page=${that.data.page}&size=${that.data.size}&q=${that.data.params}`, function(res) {
res.data.content.filter((value) => {
return value.createAt = util.formatTimeDistance(new Date(value.createAt))
})
let newsList = that.data.newsList.concat(res.data.content);
that.setData({
newsList: newsList,
totalPages: res.data.totalPages,
})
if (res.data.content.length === 0) {
that.setData({
noData: true
})
}
if (res.data.content.length !== 0 && that.data.page + 1 == that.data.totalPages) {
that.setData({
loadingCompeleted: true,
loading: false,
noData: false
})
}
setTimeout(function() {
that.setData({
refreshCompeleted: true
})
}, 1000)
setTimeout(function() {
that.setData({
refreshCompeleted: false
})
}, 2000)
}, function(e) {
console.log(JSON.stringify(e));
});
}
},
getMoreList: function() {
let that = this;
setTimeout(function() {
if (that.data.page + 1 < that.data.totalPages) {
that.setData({
page: that.data.page + 1,
loading: true
})
if (that.data.category === "index") {
util.get(`${config.service.host}/web/news/list_with_pub_info?channelId=${config.channelId}&page=${that.data.page}&size=${that.data.size}`, function(res) {
res.data.content.filter((value) => {
return value.createAt = util.formatTimeDistance(new Date(value.createAt))
})
that.setData({
newsList: that.data.newsList.concat(res.data.content),
totalPages: res.data.totalPages,
loading: false
})
}, function(e) {
console.log(JSON.stringify(e));
});
} else if (that.data.category === "search") {
util.get(`${config.service.host}/web/news/search_in_channel_with_pub_info?channelId=${config.channelId}&page=${that.data.page}&size=${that.data.size}&q=${that.data.params}`, function(res) {
res.data.content.filter((value) => {
value.createAt = util.formatTimeDistance(new Date(value.createAt));
let keyword = that.data.params;
let re = new RegExp(keyword, "g");
value.title = value.title.replace(re, `<text class="keyword">${keyword}</text>`);
return value
})
that.setData({
newsList: that.data.newsList.concat(res.data.content),
totalPages: res.data.totalPages,
loading: false
})
}, function(e) {
console.log(JSON.stringify(e));
});
} else if (that.data.category === "professor") {
util.get(`${config.service.host}/web/news/list_by_follow_with_pub_info?pubId=${that.data.params}&page=${that.data.page}&size=${that.data.size}&q=${that.data.params}`, function(res) {
res.data.content.filter((value) => {
return value.createAt = util.formatTimeDistance(new Date(value.createAt))
})
that.setData({
newsList: that.data.newsList.concat(res.data.content),
totalPages: res.data.totalPages,
loading: false
})
}, function(e) {
console.log(JSON.stringify(e));
});
}
} else {
that.setData({
loading: false,
loadingCompeleted: true
})
}
}, 500)
},
},
})
相关文章
- 一个关于小程序与单片机的通信实例(TCP/IP)
- Winfrom强大的自动更新程序
- Linux 设置程序开机自启动 (命令systemctl 和 chkconfig用法区别比较)
- 简单java在线测评程序
- 微信小程序 调用远程接口,给全局数组赋值
- asp程序里,如何判断一个字符串中存在包含了另一个字符串?
- mysql储存函过程和储存函数都属于存储程序
- [转] “无法注册程序集***dll- 拒绝访问。请确保您正在以管理员身份运行应用程序。对注册表项”***“的访问被拒绝
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
- 命名空间“HaiChuang.AMAC”中不存在类型或命名空间名称“WCFClient”。是否缺少程序集引用?
- Linux下打印程序调用栈callstack
- 成功解决‘nvidia-smi‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
- m基于Lorenz混沌自同步的混沌数字保密通信系统的FPGA实现,verilog编程实现+MATLAB混沌验证程序
- 习题 8.5 将本章的例8.4改写为一个多文件的程序:1.将类定义放在头文件arraymax.h中;2.将成员函数定义放在源文件arraymax.cpp中;3.主函数放在源文件file1.cpp中。
- 习题 6.15 编写一个程序,将字符数组s2中的全部字符复制到字符数组s1中。不用strcpy函数。复制时,‘0’也要复制过去。‘0’后面的字符不复制。
- 下面程序的输出结果是( )
- Python重写C语言程序100例--Part9
- 使用WPF来创建 Metro UI程序
- NDK-JNI实战教程(一) 在Android Studio运行第一个NDK程序