美文网首页
小程序踩坑-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

    swipper 里的current和display-multiple-items搭配使用时,假设一共有x项,dis...

  • 小程序资源

    小程序webview踩坑小程序图片转二进制微信基础库对应关系

  • 小程序踩坑

    1.不能在wxss文件background属性中引用本地图片文件2.text标签类似span这种行内标签,不能设置...

  • 小程序踩坑

    开发者开发不同账号的小程序。填写appID,微信根据不同的appID判断该小程序属于哪个账号。 修改数据后不自动渲...

  • 小程序踩坑

    wss图片获取:image.png 2.page.json设置:每一个小程序页面也可以使用.json文件来对本页面...

  • 小程序踩坑

    主要内容 记录小程序开发中碰到的问题以及解决方案 CSS部分 解决小程序按钮border无法清除问题 小程序按钮 ...

  • 我的前端笔记

    目录 react 小程序 vue typescript 经验(踩坑) react useMemo 和 useCal...

  • 【教程】微信小程序入门

    微信小程序入门基础知识 Moustache:我的微信小程序入门踩坑之旅 github精选:微信小程序入门简要教程 ...

  • 开发微信小程序分页功能的坑

    微信小程序开发分页的坑 微信小程序开发中list列表经常要进行分页处理,踩坑在所难免。 app.json wxml...

  • 微信小程序BLE踩坑记录

    小程序BLE踩坑记录 前往官方文档 项目描述 手机小程序通过BLE向android设备发送WIFI名称/密码等信息...

网友评论

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

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