上拉触底 加载数据后,原先加载的数据不会在子组件重新加载吗,这是一个BUG吗

发布于 7 年前作者 esu1935 次浏览最后编辑 7 年前来自 ask

数据库有13条数据,初始化加载10条数据,当我下拉触底时,加载了剩下的3条数据,然后在父组件setData,

const that = this;

app.api(‘api’, this.data.apiParams, res => {

that.setData({

list: that.data.list.concat(res)

});

});

list 为父组件数据,Array格式,然后遍历传递给子组件,但是只传递了3条数据,(此时list是13条数据),原先的10条数据没有传递给子组件

WXOPEN Club 内容图片

下图为footer.js子组件生命周期,可以看到我打印this.data为后两张图的数据

WXOPEN Club 内容图片

第一次加载10条数据,打印10条

WXOPEN Club 内容图片

第二次加载剩下的3条数据,只打印了3条

(以为是13条,因为我在父组件中触底时加载时setData

   that.setData({

   list: that.data.list.concat(res)

   });

WXOPEN Club 内容图片

请问要如何才能让子组件接收到包含原来的数据,还是我的姿势不对吗?请各位大佬指教,感谢!

10 回复
xiulan62
xiulan621 楼6 年前

@杨泉 谢谢你 ,格式化的部分我做在了observer上,解决了这个问题

样式我试了3种方法,

1.wxs渲染不出来

WXOPEN Club 内容图片

2.ovserver 不知道如何做

3.

WXOPEN Club 内容图片

请问大佬还有什么办法吗,谢谢大佬解答

gongguiying
gongguiying2 楼6 年前

目前我的解决办法是不用子组件了,直接在父组件写,好烦

fangmao
fangmao3 楼6 年前

第一次加载数据有格式化日期,标题样式也有,但是触底加载新数据进来后,只有新数据日期有格式化和有样式,旧数据(原本有格式化和样式)没有格式化和样式不见了你说wx:key,起初我也怀疑是这个原因,但是我把wx:key去掉也是同样的结果

ygao
ygao4 楼6 年前

日期没有格式化的原因是因为,第一次组件加载的时候ready发生,但是组件property传递来的data,此时并未渲染。

ready是可能发生在数据渲染之前的,明白?

你这种情况把格式化那部分做到property的observer上,或者直接在wxml中使用wxs来实现

guiyingwei
guiyingwei5 楼6 年前

第三种是可以的,但是我感觉不是很优雅

vhou
vhou6 楼6 年前

第一次加载数据没有格式化日期吗?不过我好像明白你的意思了,你说的没有重新加载应该是wx:key起作用了,因为你是循环加载多个组件的。

xia65
xia657 楼6 年前
WXOPEN Club 内容图片

你如果仔细看得话,可以看到标题样式和右下角的日期,日期我是拿时间戳格式化的,旧数据没有格式化,新数据格式化了

WXOPEN Club 内容图片

结构

WXOPEN Club 内容图片

样式

WXOPEN Club 内容图片

原有数据

WXOPEN Club 内容图片 WXOPEN Club 内容图片

样式不见了,时间戳也没格式化新数据

WXOPEN Club 内容图片 WXOPEN Club 内容图片
qzhao
qzhao8 楼6 年前

你分页后的数据应该追加到原来页面的list数据里面去,然后就是13条一起显示了

contentlist: contentlistTem.concat(contentlist),

别人的链接,仅供参考:https://blog.csdn.net/xiehuimx/article/details/74938034

ylong
ylong9 楼6 年前

wxs只支持es5, 仔细看文档,包括wxs支持的数据类型和內建函数

组件property的observer仔细看文档。

luojie
luojie10 楼5 年前

不对兄弟,你这不是只打印了三条,这是打印了三次,实际效果应该是对的吧?