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

r囧r小猫 2021-07-25 18:45 1482阅读 0赞

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

## 效果图： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 代码实现： ##

<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>

[https_ext.dcloud.net.cn_plugin_id_54]: https://ext.dcloud.net.cn/plugin?id=54
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/ce4d972532ff4843bef7c905c6c69829.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1482人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp的map组件

uni-app 地图使用的是腾讯地图注：中间不能有多个并列，不然编译不通过。 vue模板只能有一个根目录 <template> <view>

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 05:37/ 0 赞/ 480 阅读

相关 uniapp loading 组件

> 组件：loading.vue <template> <view> <view class="cu-load load-modal" v-if

「爱情、让人受尽委屈。」/ 2021年09月19日 16:36/ 0 赞/ 908 阅读

相关 uniapp组件汇总

1. [Card卡片][Card] 2. [uni-swiper-dot轮播图指示点][uni-swiper-dot] 3. [Section章节标题][Section]

「爱情、让人受尽委屈。」/ 2021年09月07日 06:13/ 0 赞/ 700 阅读

相关 uniapp组件-Card卡片

官方组件：[https://ext.dcloud.net.cn/plugin?id=22][https_ext.dcloud.net.cn_plugin_id_22] 效

青旅半醒/ 2021年07月26日 02:24/ 0 赞/ 1409 阅读

相关 uniapp组件-uni-icons 图标

官网示例：[https://ext.dcloud.net.cn/plugin?id=28][https_ext.dcloud.net.cn_plugin_id_28] 例

比眉伴天荒/ 2021年07月25日 22:02/ 0 赞/ 1552 阅读

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

官方示例：[https://ext.dcloud.net.cn/plugin?id=54][https_ext.dcloud.net.cn_plugin_id_54] 效

r囧r小猫/ 2021年07月25日 18:45/ 0 赞/ 1483 阅读

相关 uniapp组件-button按钮

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

川长思鸟来/ 2021年07月25日 14:27/ 0 赞/ 1572 阅读

相关 uniapp组件-uni-pagination分页器

官方示例：[https://ext.dcloud.net.cn/plugin?id=32][https_ext.dcloud.net.cn_plugin_id_32] Pag

浅浅的花香味﹌/ 2021年07月25日 11:31/ 0 赞/ 1720 阅读

相关 uniapp组件-uni-rate评分

官方示例：[https://ext.dcloud.net.cn/plugin?id=33][https_ext.dcloud.net.cn_plugin_id_33] 评分组

Bertha 。/ 2021年07月25日 11:18/ 1 赞/ 1371 阅读

相关 uniapp 组件传参

父组件 <v-sub @returnDate=returnDate :backGround=backGround></v-sub> import v

我会带着你远行/ 2021年07月24日 13:11/ 0 赞/ 553 阅读