优化长列表的swiper

比如，现在有一个长列表，点击列表，swiper显示，并且swiper-item显示点击对应的列表项信息。可以拖动切换swiper-item。如：

udian.gif

设长列表数据为goodsList，错误的做法：

<swiper bindchange="indexChange" current="{{showIndex}}"
             interval="{{5000}}" duration="{{1000}}" indicator-dots="{{false}}" >
       <block wx:for="{{goodsList}}" wx:key=""
           >
         <swiper-item>
           <template is="showGoodsList" data="{{ ...item, index}}"/>
         </swiper-item>
       </block>
     </swiper>

直接遍历整个goodsList去生成swiper-item,节点太多会导致卡顿。

正确的做法：

<swiper bindchange="indexChange" current="{{showIndex}}"
              interval="{{5000}}" duration="{{1000}}" indicator-dots="{{false}}" >
        <block wx:for="{{goodsList}}" wx:key="" wx:if="{{(index >= (choiceItem - 1)) && (index <= (choiceItem + 1))}}"
            >
          <swiper-item>
            <template is="showGoodsList" data="{{ ...item, index}}"/>
          </swiper-item>
        </block>
      </swiper>

根据当前选中的choiceItem，只显示前后两个加当前，三个swiper-item,做到了优化。
js部分：

choiceGoods(e) {
    var index = e.currentTarget.dataset.index;
    this.setData({
      choiceItem: index,
      is_show_item: 1,
      showIndex: index == 0 ? 0 : index == this.data.goodsList.length ? 2 : 1,
    })
  }