在家写了个简单的选中交互demo

叁歲伎倆 2022-11-20 12:55 102阅读 0赞

最近遇到一个需求，有两个按钮，页面首次进来都是**未选中**状态，点击其中一个**选中**，点另一个也是**选中**，再点击同一个**不选中**，再点击另一个**选中**，再点击同一个**不选中**

在家写了个简单的demo

<template>
    	<view>
    		<view class="screen-box">
    			<view class="screen-item" @click="typeTap(0)">
    				<view :class="flag===true&tabIndex===0?'selected':'unselected'">时间</view>
    				<view :class="flag===true&tabIndex===0?'triangle-up':'triangle-down'"> </view>
    			</view>
    			<view class="screen-item" @click="typeTap(1)">
    				<view :class="flag===true&tabIndex===1?'selected':'unselected'">价格</view>
    				<view :class="flag===true&tabIndex===1?'triangle-up':'triangle-down'"> </view>
    			</view>
    		</view>
    
    		<block v-if="flag===true">
    			<view class="show">显示</view>
    		</block>
    	</view>
    </template>
    
    <script>
    	export default {
        
    		components: {
        },
    		data() {
        
    			return {
        
    				flag: false,
    				tabIndex: -1
    			}
    		},
    		onLoad() {
        
    
    		},
    		methods: {
        
    			typeTap(index) {
        
    				if (this.tabIndex != index) {
        
    					this.tabIndex = index;
    					this.flag = true;
    				} else {
        
    					this.flag = !this.flag;
    				}
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.screen-box {
        
    		display: flex;
    		padding: 30rpx;
    
    		.screen-item {
        
    			display: flex;
    			align-items: center;
    			padding-right: 30rpx;
    
    			view {
        
    				font-size: 30rpx;
    			}
    
    			.selected {
        
    				color: red;
    			}
    
    			.unselected {
        
    				color: #000000;
    			}
    			//向上的三角形
    			.triangle-up {
        
    				width: 0;
    				height: 0;
    				border-left: 8rpx solid transparent;
    				border-right: 8rpx solid transparent;
    				border-bottom: 16rpx solid red;
    			}
    			//向下的三角形
    			.triangle-down {
        
    				width: 0;
    				height: 0;
    				border-left: 8rpx solid transparent;
    				border-right: 8rpx solid transparent;
    				border-top: 16rpx solid #000000;
    			}
    		}
    	}
    
    	.show {
        
    		padding: 20rpx;
    		margin: 0 20rpx 20rpx 20rpx;
    		width: 400rpx;
    		height: 200rpx;
    		background: #fff;
    		box-shadow: 0px 0px 30rpx 5rpx #E1E1E1;
    		border-radius: 16rpx;
    	}
    </style>