方法一:通过事件实现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”选中样式。