在uniapp和vue中控制卡片切换

曾经终败给现在 2022-12-08 05:14 296阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left 1]

### 在uniapp和vue中控制卡片切换 ###

--------------------

提示：以下分两步介绍；

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

--------------------

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

template代码如下：

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代码结构如下：

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

html代码结构如下：

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，双向绑定数据控制样式。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left]: https://img-blog.csdnimg.cn/20200918102919909.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70#pic_left
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221123/d9945da2e332439bab8029f8e398e634.png
[scroll-view]: https://uniapp.dcloud.io/component/scroll-view