1.目录结构:在index页面里调用page页面(组件),在page页面里使用了vant框架,结果报错了,代码如下:
index.wxml:
<view>
<van-tabs title-active-color="red" sticky active="{{ active }}" bind:change="onChange" >
<van-tab class="van-tab" title="我参与的" >
<collagePage wx:if="{{active == 0}}" loadType="{{loadType}}" bindloadback="loadback"></collagePage>
</van-tab>
<van-tab class="van-tab" title="我发起的" >
<collagePage wx:if="{{active == 1}}" loadType="{{loadType}}"></collagePage>
</van-tab>
</van-tabs>
</view>
page.wxml:
<view class="list">
<view wx:if="{{list}}" wx:for="{{list}}" wx:key="item">
<van-row class="title">
<van-col span="8" class="shop">{{item.shopName}}</van-col>
<van-col span="12">仅剩</van-col>
<van-col span="4" class="type">还差1人</van-col>
</van-row>
<van-card
num="1"
tag="拼团"
price="0.01"
desc="{{item.makeCount}}人团"
origin-price="{{item.originalPrice}}"
title="{{item.productName}}"
title-class="listTitle"
thumb=""
>
<view slot="footer">
<van-button size="small" color="#FF1919" round>查看</van-button>
<text decode> </text>
<van-button size="small" color="#ffa518" round >邀请好友</van-button>
</view>
</van-card>
</view>
</view>
报错信息如下:
2.百度发现,报错原因是因为小程序的基础库有问题(官方说已修复,但是事实证明并没有,目前的基础库版本为:2.20.2),而且并不是所有的条件都会触发这个bug,是要在子组件中有wx:if和wx:for才会触发
我想要的结果图:
目前我的解决办法如下:
思路:既然子组件不可以写wx:for,那我把wx:for提出来可不可以?
1.index.wxml
<view>
<van-tabs title-active-color="red" sticky active="{{ active }}" bind:change="onChange" >
<van-tab class="van-tab" title="我参与的" >
<view wx:if="{{list}}" wx:for="{{list}}" wx:key="item">
<collagePage item="{{item}}"></collagePage>
</view>
</van-tab>
<van-tab class="van-tab" title="我发起的" >
<collagePage wx:if="{{active == 1}}" item="{{item}}"></collagePage>
</van-tab>
</van-tabs>
</view>
2.page.wxml
<view class="list">
<van-row class="title">
<van-col span="8" class="shop">{{item.shopName}}</van-col>
<van-col span="12">仅剩</van-col>
<van-col span="4" class="type">还差1人</van-col>
</van-row>
<van-card
num="1"
tag="拼团"
price="0.01"
desc="{{item.makeCount}}人团"
origin-price="{{item.originalPrice}}"
title="{{item.productName}}"
title-class="listTitle"
thumb=""
>
<view slot="footer">
<van-button size="small" color="#FF1919" round>查看</van-button>
<text decode> </text>
<van-button size="small" color="#ffa518" round >邀请好友</van-button>
</view>
</van-card>
</view>
解决~~~