最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】小程序中for循环的list元素警告:Now you can provide attr “wx:key” for a “wx:for” to improve performance

key crifan 934浏览 0评论
折腾:
【未解决】小程序中列表中实现每行左边图片右边多行键值对的文字效果
期间,看到代码:
  <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}}"
  >
结果:问题依旧。
所以去看官网解释:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
80 queries in 0.168 seconds, using 22.17MB memory