uniapp组件-uni-segmented-control分段器

最新推荐文章于 2025-03-21 08:00:00 发布

疆~

最新推荐文章于 2025-03-21 08:00:00 发布

阅读量1w

点赞数 2

本文链接：https://blog.csdn.net/qq_40323256/article/details/114260031

版权

微信小程序/uniCloud 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了一个uni-segmented-control组件的使用示例，通过不同样式类型的选项卡展示了如何通过点击事件切换选项卡内容。代码中包含了按钮样式和文本样式的选项卡，并演示了如何设置选项卡的背景颜色及点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方示例：https://ext.dcloud.net.cn/plugin?id=54

效果图：

代码实现：

<template>
	<view>
		<view>
			<uni-segmented-control :current="current" :values="items" style-type="button" active-color="#dd524d" @clickItem="onClickItem" />
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#007aff" @clickItem="onClickItem" />
		</view>
		<view style="padding: 0px 30px;margin-top: 30px;">
			<uni-segmented-control :current="current" :values="items" style-type="button" active-color="#4cd964" @clickItem="onClickItem" />
		</view>
		<view>
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#4cd964" @clickItem="onClickItem" />
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				items: ['选项卡1', '选项卡2', '选项卡3'],
				current: 0,
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		}
	}
</script>

关注博主即可阅读全文