美文网首页
小程序踩坑-swipper

小程序踩坑-swipper

作者: 打工人伽瓦 | 来源:发表于2019-12-02 14:21 被阅读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> 
    

    相关文章

      网友评论

          本文标题:小程序踩坑-swipper

          本文链接:https://www.haomeiwen.com/subject/setfgctx.html