小程序踩坑-swipper

2019-12-02  本文已影响0人  打工人伽瓦

swipper 里的current和display-multiple-items搭配使用时,假设一共有x项,display-multiple-items设置为y,则current应该设置为{{currentTab>=(x-y)?(x-y):currentTab}},这样设置的原因是确保当前显示的swipper-item为y。默认从currentTab开始,往后数y个swipper-item,不够的话显示空白异常

<swiper current="{{currentTab>=2?2:currentTab}}" class="swiper-tab" display-multiple-items="3" duration="300">
  <swiper-item>
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" catchtap="switchNav">item1</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" catchtap="switchNav">item2</view>
  </swiper-item>
  <swiper-item>
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" catchtap="switchNav">item2</view>
  </swiper-item>
   <swiper-item>
    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" catchtap="switchNav">item2</view>
  </swiper-item>
   <swiper-item>
    <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" catchtap="switchNav">item2</view>
  </swiper-item>
</swiper> 
上一篇 下一篇

猜你喜欢

热点阅读