今天在写小程序轮播时候,数据如何都无法渲染。
渲染页面如下
首先我想到的是js中网络请求,自己拉取的数据有问题吗,但是log了一下是有数据的,
然后我去请教我的同事,我的同事看过我的代码后也认为没有问题。
让我在onLoad、以及onReady中log一下,结果是没数据的,我们误以为是这个问题(错误做法,花费了大量时间,这两个钩子里面确实是没有数据的,原因未知,等有空再详细研究)
最后我们经过排查还是确定问题在wxml中 ,于是将该代码重写,效果出现。经过详细比对,最终发现问题。
代码如下:
<swiper indicator-dots="true">
<swiper-item wx:for="{{banner_list}}" wx:key="index">
<image src="{{item.pic}}" mode="" />
</swiper-item>
</swiper>
<swiper indicator-dots="true">
<swiper-item wx:for="{{banner_list}} " wx:key="index">
<image src="{{item.pic}}" mode="" />
</swiper-item>
</swiper>
正确代码为第一个,第二个错误在wx:for双大括号后有一个空格。(代码是格式化过的,因此不曾想到过是空格的问题)
故特写一篇文章,提醒自己,该问题不可再犯
也希望能给大家提供一些帮助。一定要相信自己,不要自我怀疑