在uniapp和vue中控制卡片切换

在uniapp和vue中控制卡片切换

---

提示：以下分两步介绍；

1. 动态绑定class，数据双向绑定
2. 卡片结构

---

一、动态绑定class，数据双向绑定

template代码如下：

<view @tap="change(0)" :class="{active:btnnum == 0}" class="title-item">已发布</view>
<view @tap="change(1)" :class="{active:btnnum == 1}"class="title-item">审批中</view>

script部分：

在data中写入 btnnum: 0,

在methods中写入change方法：
change(e) {
	this.btnnum = e
	// console.log(this.btnnum)
},

用css中控制动态类名active样式

.active {
	color: $uni-text-title;
	font-size:$uni-font-size-lg;
	font-weight: 500;
}

用伪元素写文字下面的“——”
.title-item{
	position: relative;
}

.active:after{
	width: 30rpx;
	height: 6rpx;
	position: absolute;
	content: '';
	bottom: 30rpx;
	left: 50%;
	transform: translateX(-50%);
	background: #202020;
	border-radius: 3rpx;
}

二、卡片结构

---

提示：以下介绍了两种点击切换事件，下面案例可供参考；

1. 在uniapp中使用scroll-view组件
2. 在vue中动态绑定class控制display的none和block属性
   

---

一.在uniapp中使用scroll-view组件

html代码结构如下：

<view class="end-cont" v-if="btnnum ==0">
	<!-- 房源列表 -->
	<scroll-view class="scroll-con" scroll-y>
		<view class="cards" 
			v-for="(item, index) in focusList" 
			:key="index" 
			:class="{nomargin:index==focusList.length-1}"
		>
		</view>
	</scroll-view>
</view>

<view class="end-cont"  v-if="btnnum == 1"></view>

二.vue中动态绑定class控制display的none和block属性

html代码结构如下：

<view class="end-cont" :class="{active:btnnum == 0}">
	<view class="stray-dog con" 
		v-for="(item, index) in strayDogList" 
		@click="goPage(item.url)">
	</view>
</view>
<view class="end-cont" :class="{active:btnnum == 1}"></view>
<view class="end-cont" :class="{active:btnnum == 2}"></view>

css代码如下：

/* 将三个内容view的display设置为none(隐藏) */
.end-title{
	display: flex;
	padding: 20upx 0;
}
.end-title view{
	flex-grow: 1;
	text-align: center;
	border-radius: 30upx;
	padding:10upx 5upx;
	margin: 0 30upx;
}
.end-cont{
	display: none;
}
.btna{
	color: #FFFFFF;
	background: #9c652f;
	border-radius: 30upx;
}
.active{
	display: block;
}

总结

本文仅总结我在做项目的时候用到的两种方法，在uniapp中尽量用自带的组件，比较稳定，推荐用scroll-view方法来写，用第二种的时候被前辈pass掉了，其实也就是动态绑定class，双向绑定数据控制样式。