原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处
接上文 [微信小程序开发]动态数据不够用,本地静态数据的使用教程
从小黄象群里拿到的一个商城的微信小程序源码,数据做成静态放到本地,在本地联调测试。
在调试过程过程中遇到一个很奇怪的问题,上代码
<view class="container">
<block wx:for="{{brandList.brand}}">
<view class="brand_item">
<navigator url="../list/index?brand={{item.id}}&typeid={{item.typeid}}">
<image src="{{item.pic}}" class="pic"></image>
<view class="right_cont">
<image src="{{item.logo}}" class="logo"></image>
<text class="name">{{item.chinesename}}</text>
<text class="brief">{{item.brief}}</text>
<text class="price">¥{{item.minprice}}元/件起</text>
</view>
</navigator>
</view>
</block>
</view>
代码中 brandList.brand 是个集合,然后遍历,但是界面死活不出效果
我就挨个联调,代码变成下面这样
<view class="container">
<block wx:for="{{brandList.brand}}">
<view class="brand_item">
<text class="name">{{item.chinesename}}</text>
</view>
</block>
</view>
还是不出
变成这样
<view class="container">
<block wx:for="{{brandList.brand}}">
<view class="brand_item">
{{item.chinesename}}
</view>
</block>
</view>
终于出来了
有一个null值,直接怀疑就是这个null值导致的(我是不是很聪明),翻文档,找到三目运算,改成如下代码
<view class="container">
<block wx:for="{{brandList.brand}}">
<view class="brand_item">
<navigator url="../list/index?brand={{item.id}}&typeid={{item.typeid}}">
<image src="{{item.pic}}" class="pic"></image>
<view class="right_cont">
<image src="{{item.logo}}" class="logo"></image>
<!-- 好坑啊啊 item.chinesename is null -->
<text class="name">{{item.chinesename?item.chinesename:'名称缺失'}}</text>
<text class="brief">{{item.brief}}</text>
<text class="price">¥{{item.minprice}}元/件起</text>
</view>
</navigator>
</view>
</block>
</view>
运行效果如下
————————————华丽的分割线(我是糗*老友)————————————
总结一下:
html<text class="name">{{item.chinesename}}</text>
我踩了这个坑,希望以后遇到同样问题的小伙伴们能想到是这个问题导致的,快速解决。