微信小程序使用 Swiper 组件实现 Tab 选项卡功能代码，复制即用！

最新推荐文章于 2024-04-13 11:35:17 发布

相逢不晚何必匆匆

最新推荐文章于 2024-04-13 11:35:17 发布

阅读量945

点赞数 5

分类专栏： # 微信小程序文章标签：微信小程序 Tab选项卡功能 Swiper

本文链接：https://blog.csdn.net/ZhangJiWei_2019/article/details/113944843

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用WXML、WXSS和JS实现微信小程序中选项卡（swiper-tab）与轮播图（swiper）的交互功能。通过设置数据属性`currentTab`并监听用户点击和轮播事件，动态改变选中状态和内容展示。示例代码展示了如何通过类名切换底部导航高亮，并在点击和滑动时更新当前页面。

摘要由CSDN通过智能技术生成

一、WXML 代码

<view class="swiper-tab">
   <view class="swiper-tab-item {{currentTab == 0 ? 'swiper-tab-item-active' : ''}}" data-current="0" bindtap="changeSwiperTab">页面一</view>
   <view class="swiper-tab-item {{currentTab == 1 ? 'swiper-tab-item-active' : ''}}" data-current="1" bindtap="changeSwiperTab">页面二</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
   <swiper-item>
     页面一内容
   </swiper-item>
   <swiper-item>
     页面二内容
   </swiper-item>
</swiper>

二、WXSS 代码

.swiper-tab {
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.swiper-tab-item {
  width: 50%;
  height: 20px;
  padding: 5px;
}
.swiper-tab-item-active {
  border-bottom: orangered 2px solid;
  color: orangered;
}

三、JS 代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0 // 选项卡默认位置
  },
   /**
   * 点击tab菜单切换
   * @param {} e 
   */
  changeSwiperTab: function (e) {
    var _this = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      _this.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  /**
   * 滑动选项卡切换
   */
  swiperTab: function (e) {
    var _this = this;
    _this.setData({
      currentTab: e.detail.current
    })
  },