uni-app中tab选项卡的实现效果 @click=“clickTab(‘sell‘)“事件可传参数

一、效果图

二、代码

html 复制代码
<template>
	<view>
		<view class="choose-tab">
			<view class="choose-tab-item" :class="chooseTab == 0 ? 'active' : ''" data-choose="0" @click="clickTab">选项1</view>
			<view class="choose-tab-item" :class="chooseTab == 1 ? 'active' : ''" data-choose="1" @click="clickTab">选项2</view>
			<view class="choose-tab-item" :class="chooseTab == 2 ? 'active' : ''" data-choose="2" @click="clickTab">选项3</view>
			<view class="choose-tab-item" :class="chooseTab == 3 ? 'active' : ''" data-choose="3" @click="clickTab">选项4</view>
		</view>
		
		<view class="content">
			<view :style="chooseTab != 0 ? 'display:none' : ''">选项1内容</view>
			<view :style="chooseTab != 1 ? 'display:none' : ''">二内容</view>
			<view :style="chooseTab != 2 ? 'display:none' : ''">three content</view>
			<view :style="chooseTab != 3 ? 'display:none' : ''">1+1+1+1=4</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseTab: 0 //当前选中的选项卡:默认选中第一个~
			}
		},
		onLoad: function (options) {
			// 页面初始化 options为页面跳转所带来的参数
		 
		},
		methods: {
			clickTab: function (e) { //点击切换
				this.chooseTab = e.target.dataset.choose;
				
				//如果是微信小程序,可使用该方法改变当前设置的值
				/*this.setData({
				    chooseTab: e.target.dataset.choose
				})*/
			}
		}
	}
</script>

<style>
	.choose-tab {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-bottom: 2rpx solid #ccc;
	}
	.choose-tab-item {
		width: 25%;
	}
	.active {
		color: red;
		border-bottom: 4rpx solid red;
	}
	.content {
		text-align: center;
	}
</style>

转载

转载大佬

相关推荐
2501_915909061 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
盛夏绽放2 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
2501_9159184115 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_9159090618 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师19 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj20 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone