小程序的几种切换效果和一些小心得（tab，swiper）

最新推荐文章于 2025-05-12 02:18:14 发布

原创最新推荐文章于 2025-05-12 02:18:14 发布 · 6k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了一种简易的导航栏与内容切换方案，并对比了两种不同的实现方式：一种仅支持点击切换，另一种还支持左右滑动切换，详细解析了各自的代码实现及用户体验差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

只有最简单的切换。不支持左右滑动效果。代码量少。用户体验一般

index.wmxl

<!--导航条-->
<view class="navbar">
  <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
 
<!--111-->
<view hidden="{{currentTab!==0}}">
  111
</view>
 
<!--222-->
<view hidden="{{currentTab!==1}}">
  222
</view>
 
<!--333-->
<view hidden="{{currentTab!==2}}">
  333
</view>

index.wxss

page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.navbar{
  flex: none;
  display: flex;
  background: #fff;
}
.navbar .item{
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 80rpx;
}
.navbar .item.active{
  color: red;
}
.navbar .item.active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: red;
}

index.js

var app = getApp()
Page({
    data: {
        navbar: ['111', '222', '333'],
        currentTab: 0
    },
    navbarTap: function (e) {
        this.setData({
            currentTab: e.currentTarget.dataset.idx
        })
    }
})

支持左右滑动和切换。代码量稍微多一点。用户体验较好

index.wxml

      <!-- tab3次切换   -->
<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>
<swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab" class='swiper-d'> 
  <swiper-item>
        <text>1111</text>
      </swiper-item>  

    <swiper-item>
        <text>1211</text>
      </swiper-item>  
    <swiper-item>
        <text>131</text>
      </swiper-item>  

</swiper>

index.js

Page({
  data: {

  },

// tab切换开始
  swiperTab: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
// tab切换结束

})

index.wxss

swiper{
   /* height: 1122rpx;  */
   height:calc(100% - 330rpx);
}
.swiper-tab{
    width: 100%;
    /* border-bottom: 2rpx solid #ccc; */
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-flow: row;
    background-color: #DF142E;
    color: white;
}
.swiper-tab-item{
    width: 22%; 
    color:#000000;
    margin-left: 65rpx;
    font-size: 32rpx;
    color: white;
}
 .active{
    /* color:#d70615; */
    border-bottom: 1rpx solid white;
    margin-bottom: 8rpx;
} ```
这里面涉及了calc的概念。height：calc（100% - xxrpx）；效果是动态计算高度，swiper不能把高度固定死。不然会出现很多问题。后期数据循环的时候会出现数据展示不全的情况。