微信小程序swiper制作内容高度不定的tab选项卡

最新推荐文章于 2025-05-24 11:36:00 发布

原创

最新推荐文章于 2025-05-24 11:36:00 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #tab选项卡 #高度不定 #swiper选项卡 #左右滑动切换

微信小程序利用swiper制作内容高度不定的tab选项卡，不使用absolute定位，不定高度，由内容自由撑开
主要思路是获取内容区的高度来给swiper动态设置值。
.wxml

<view class='content'>
  <view class="swiper-tab">
    <view class="swiper-tab-item {
  
  {currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">第一</view>
    <view class="swiper-tab-item {
  
  {currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">第二</view>
    <view class="swiper-tab-item {
  
  {currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">第三</view>
    <view class="swiper-tab-item {
  
  {currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">第四</view>
    <view class="swiper-tab-item {
  
  {currentTab==4?'active':''}}" data-current="4" bindtap="clickTab">第五</view>
  </view>
  <swiper current="{
  
  {currentTab}}" duration="300" bindchange="swiperTab">
    <swiper-item>
      <!--logs.wxml--