微信小程序之tab标题切换

最新推荐文章于 2024-06-13 15:46:41 发布

原创最新推荐文章于 2024-06-13 15:46:41 发布 · 987 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

小程序专栏收录该内容

67 篇文章

订阅专栏

本文介绍两种在微信小程序中实现Tab切换的方法。一是通过事件监听实现动态切换内容面板，二是利用radio组件的选中状态切换样式，达到视觉上的Tab切换效果。文章详细展示了XML、JS及CSS代码，适用于小程序开发者快速实现Tab栏功能。

方法一：通过事件实现tab切换

xml部分如下所示：

<!-- tab切换 -->
<view class="weui-navbar" style="width: 100%;">
	<block wx:for="{{tabs}}" wx:key="*this">
		<view id="{{index}}" class="wehx-navbar_item" bindtap="tabClick">
			<view class="wehx-navbar__title {{currentTab == index ? 'wehx-navbar_active' : ''}}">{{item}}</view>
		</view>
	</block>
</view>
<!-- 内容 -->
<view class="weui-tab">
  <view class="weui-tab__content" show="{{currentTab == 0}}">
  	<view class="wehx-card_demo" wx:for="{{items}}" wx:key="*this">
		<view class="wehx-card_top"></view>
		<view class="wehx-card_content">{{item.content}}</view>
		<view class="wehx-card_bottom" style="padding:24rpx 0;">
			<view class="color_primary">{{item.data}}</view>
			<view class="btn_mini wehx-btn_primary" style="font-size:24rpx;padding:4rpx 24rpx;border-radius:4rpx;">抢单</view>
		</view>
	</view>
  </view>
  <view class="weui-tab__content" show="{{currentTab == 1}}">
	<view class="wehx-card_demo" wx:for="{{bills}}" wx:key="*this">
		<view class="wehx-card_top"></view>
		<view class="wehx-card_content">{{item.content}}</view>
		<view class="wehx-card_bottom" style="padding:24rpx 0;">
			<view class="color_primary">{{item.data}}</view>
			<view class="btn_mini wehx-btn_primary" style="font-size:24rpx;padding:4rpx 24rpx;border-radius:4rpx;">抢单</view>
		</view>
	</view>
  </view>
</view>

js部分如下所示

data: {
	tabs: ["标题1", "标题2"],
    currentTab: 0,//默认显示   全部
    items: [
      {
        content: "内容1",
        data: "2019.09.11 14:46"
      },
      {
        content: "内容2",
        data: "2019.09.11 14:46"
      },
      {
        content: "内容3",
        data: "2019.09.11 14:46"
      },
      {
        content: "内容4",
        data: "2019.09.11 14:46"
      },
      {
        content: "内容5",
        data: "2019.09.11 14:46"
      }
    ], // 数据
    bills: [
      {
        content: "内容1",
        data: "2019.09.11 14:46"
      },
      {
        content: "内容2",
        data: "2019.09.11 14:46"
      },
      {
        content: "内容3",
        data: "2019.09.11 14:46"
      },
    ], // 数据
  },
  //tab切换
  clickTab: function (e) {
    let currentTab = Number(e.currentTarget.id)
    let that = this
    that.setData({
      currentTab: currentTab
    });
  },

CSS部分如下：

.wehx-card_demo {
  font-size: 30rpx;
  border-radius: 6rpx;
  background: #ffffff;
  padding: 0 30rpx;
  margin:0 20rpx 20rpx;
  box-shadow: 0 0 12rpx 0 rgba(193, 193, 193, 0.5);
}
.wehx-card_top {
  display: flex;
  align-items: center;
}

.wehx-card_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed #E5E5E5;
}

.wehx-navbar_item {
  flex: 1;
  text-align: center;
  background: #2ea7e0;
}

.wehx-navbar__title {
  font-size: 30rpx;
  color: #96D3EF;
  padding-bottom: 10rpx;
}

.wehx-navbar_active {
  color: #ffffff;
}
.wehx-navbar_active::after {
  display: block;
  content: '';
  margin: 6rpx auto;
  width: 50rpx;
  height: 6rpx;
  border-radius: 7px;
  background: #ffffff;
}

最终效果如图：
在这里插入图片描述
方法二：通过radio选中样式切换
原理：通过判断一个radio-group中哪个被选中，就让它加上一个“active”的样式。
参考：https://www.jianshu.com/p/e61939012f2b

xml部分代码如下：

<view class="container">
	<radio-group bindchange="radioCheckedChange">
		<view class="flex_box">
			<view class="flex_item">
				<label class="{{radioCheckVal==0?'active':''}}">人气
					<radio value="0" hidden="true"></radio>
				</label>
			</view>
			<view class="flex_item">
				<label class="{{radioCheckVal==1?'active':''}}"> 销量
					<radio value="1" hidden="true"></radio>
				</label>
			</view>
			<view class="flex_item">
				<label class="{{radioCheckVal==2?'active':''}}"> 价格↑
					<radio value="2" hidden="true"></radio>
				</label>
			</view>
		</view>
	</radio-group>
</view>

JS代码如下所示：

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  radioCheckVal:0 
 }, 
 radioCheckedChange:function(e){ 
  this.setData({ 
   radioCheckVal:e.detail.value 
  }) 
 } 
})

css代码如下所示：

radio-group{ 
 	width: 100%; 
} 
.flex_box{ 
	 display: flex; 
	 width: 100%; 
	 background: #eee; 
} 
.flex_item{ 
	 flex: 1; 
	 text-align: center; 
} 
.flex_item label{ 
	 padding: 10px 0; 
	 display: inline-block; 
	 width: 50%; 
} 
.flex_item label.active{ 
	 color: red; 
	 border-bottom: 2px solid red;   
}

注意：定义一个接收radio选中值的变量radioCheckVal，当监听事件被触发时，记录下被选中的radio value

<label class="{{radioCheckVal==0?'active':''}}">人气 
  <radio value="0"  hidden="true"></radio> 
</label>

取data中被选中的radio,判断当radioCheckVal==当前radio value值时，为lable添加上“active”选中样式。
在这里插入图片描述

微信小程序 之tab标题切换

微信小程序之tab标题切换