折腾:
【未解决】小程序中列表中实现每行左边图片右边多行键值对的文字效果
期间,看到代码:
<view wx:for="{{searchBookList}}" wx:for-index="bookIdx" wx:for-item="curBookItem" > 。。。 </view>
运行提示警告:
VM714:2 ./pages/index/index.wxml (anonymous) @ VM714:2 VM714:3 Now you can provide attr "wx:key" for a "wx:for" to improve performance. 44 | </view> 45 | <view class='book_list_attribute_tags'> > 46 | <view wx:for="{{curBookItem.tags}}" wx:for-index="tagIdx" wx:for-item="eachTag"> | ^ 47 | <text class='book_single_tag'>{{eachTag}}</text> 48 | </view> 49 | </view>
->很明显,和reactjs中的逻辑一样:要有个key,便于内部计算要渲染的html的diff差值时,效率最高,提升页面显示和加载的效率
->所以去加上:
<view wx:for="{{searchBookList}}" wx:for-index="bookIdx" wx:for-item="curBookItem" wx:key="{{curBookItem.id}}" >

结果:问题依旧。
所以去看官网解释:
wx:key
改为:
<view wx:for="{{searchBookList}}" wx:for-index="bookIdx" wx:for-item="curBookItem" wx:key="id" >
竟然还报错:

然后发现是tags的for循环报错的
而此处是由于:
tags中每个tag都是个普通字符串,本身就不一样,所以可以作为key本身,所以改为:
<view class='book_list_attribute_tags'> <view wx:for="{{curBookItem.tags}}" wx:for-index="tagIdx" wx:for-item="eachTag" wx:key="*this" > <text class='book_single_tag'>{{eachTag}}</text> </view> </view>
结果:
就可以消除警告了:

【总结】
小程序中,对于list列表类的for循环去显示时,(和reactjs等内部机制类似)需要一个key去提高显示的性能,具体写法是:
如果for循环中,每个元素
- 中的某个字段是唯一的,则采用该字段
- 具体写法:
- wx:key=”keyNameInEachItemDict”
- 典型的是id之类的,比如:
- wx:key=”id”
- 中本身就是一个,唯一的值,就采用本身:
- 具体写法:
- wx:key=”*this”
- 典型的就是:字符串的列表,每个都是个(不同的)字符串
参考的代码:
wx:for="{{searchBookList}}" wx:for-index="bookIdx" wx:for-item="curBookItem" wx:key="id" > ... </view>
或:
wx:for="{{curBookItem.tags}}" wx:for-index="tagIdx" wx:for-item="eachTag" wx:key="*this" > <text class='book_single_tag'>{{eachTag}}</text> </view>
详见:
中的wx:key
转载请注明:在路上 » 【已解决】小程序中for循环的list元素警告:Now you can provide attr “wx:key” for a “wx:for” to improve performance