微信小程序列表渲染注意事项

前言

由于移动端屏幕非常有限而宝贵，列表这种设计在移动端上非常常见，无论是安卓、ios还是后来的微信小程序，本篇会逐渐介绍微信小程序的列表渲染相关的知识或者是项目中遇到的问题。

问题篇

• 问题1：block中绑定事件不回调

问题描述：因为在做组件开发，鬼使神差的把绑定事件放到了block中，结果一直不触发回调，以为是自定义组件设置事件有问题，后来才发现是block中事件无法绑定。

问题代码如下：

<swiper class="top-swiper" indicator-dots='true' autoplay='true' interval='3000' indicator-color="#d8d8d8" indicator-active-color="#fe556f" circular='{{true}}'>
  <block wx:for="{{bannerList}}" wx:key="index" bindtap='bannertap' data-item='{{item}}' data-contenttype='{{item.contentType}}'>
    <swiper-item>
      <view class='img-box' style='background-image:url({{item.poster}})'></view>
    </swiper-item>
  </block>
</swiper>

正确代码，将事件绑定放到非block中：

<swiper class="top-swiper" indicator-dots='true' autoplay='true' interval='3000' indicator-color="#d8d8d8" indicator-active-color="#fe556f" circular='{{true}}'>
  <block wx:for="{{bannerList}}" wx:key="index">
    <swiper-item bindtap='bannertap' data-item='{{item}}' data-contenttype='{{item.contentType}}'>
      <view class='img-box' style='background-image:url({{item.poster}})'></view>
    </swiper-item>
  </block>
</swiper>

事件触发成功。
至于自定义组件后面再说，项目实在太忙了，简单记录一下。