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>

转载

转载大佬

相关推荐
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
遗憾随她而去.5 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰9 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
【ql君】qlexcel15 小时前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
程序员陆通15 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
nbsaas-boot16 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
Little_Code17 小时前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首17 小时前
uniapp 和原生插件交互
uni-app·交互
前端 贾公子1 天前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
源码_V_saaskw10 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台