uni-segmented-control 分段器的安装及使用

最新推荐文章于 2024-05-27 18:55:13 发布
最新推荐文章于 2024-05-27 18:55:13 发布
阅读量1.5k 收藏
点赞数
文章标签： vue.js 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shgzzd/article/details/121887762
版权

uni-segmented-control 分段器的安装及使用

dcloud插件市场

uni-segmented-control

image-20211212145808956

安装完成后，在ubuilder所在的.vue下面

		<view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964"></uni-segmented-control>
			<view class="content">
				<view v-if="current === 0">
					选项卡1的内容
				</view>
				<view v-if="current === 1">
					选项卡2的内容
				</view>
				<view v-if="current === 2">
					选项卡3的内容
				</view>
			</view>
		</view>
沐言鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
自定义UISegmentedControl控件
08-09
自定义UISegmentedControl空间
我的开发笔记---UISegmentedControl的详细使用
weixin_30522183的博客
04-12 199
当用户输入不仅仅是布尔值时，可使用分段控件（UISegmentedControl）。分段控件提供一栏按钮（有时称为按钮栏），但只能激活其中一个按钮。分段控件会导致用户在屏幕上看到的内容发生变化。它们常用于在不同类别的信息之间选择，或在不同的应用屏幕之间切换。下面介绍基本属性和基本方法的使用。 NSArray *segmentedArray = [[NSArrayalloc]initWithObj...
uni-segmented-control在微信小程序中不显示
qq_54039576的博客
03-17 425
还以为不兼容,原来是没有重新编译,下意识以为会热加载了,忘记是dist了。后面才想起, dist正在运行的微信小程序没有刚下载的分段器组件包,检查兼容性, 支持微信小程序, 尝试运行h5,显示没问题。需要结束微信小程序,重新编译运行小程序才生效.使用uni的组件, 要处理将要分类区别的数据。安装完,发现正在运行 的微信小程序没有生效,发现有uni官网有组件分段器可以用,
uni-ui app分段组件uniSegmentedControl使用
weixin_49651379的博客
11-25 3143
1.引入组件 import {uniSegmentedControl} from "@dcloudio/uni-ui"; 2.注册组件 components: { uniSegmentedControl }, 3.复制数据\方法 data() { return { items: ['选项卡1','选项卡2','选项卡3'], current: 0 } }, methods: { onClickItem(e) { if (this.current !== e.cur
uniapp 制作一个可复用的segmented-control（tab选项卡）
weixin_33941350的博客
03-26 704
开局一张图，内容全靠编 1.开局一张图（先上效果图） 2.内容全靠编 开始编写复用组件： segmented-control.vue <template> <view id="segmented" class="segmented" :style="{top:stickyTopData+'px'}"> <view class="l...
微信小程序_uni-app_分段器_uni-segmented-control
王大锤的博客
05-19 3066
写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1，该视频是讲了一个基于uni-app的项目 1 分段器_uni-segmented-control nui-ui中的一个组件，也就是标签页，tab栏 2 代码示例 <template> <view> .
uniapp组件-uni-segmented-control分段器
~~
03-01 9969
官方示例：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" /> </vie.
segmented-control:look美观的分段控件React组件
05-07
但是，越来越多地使用分段控件来代替或选择输入（下拉或材料）。 例如，请参阅设计师lukew的建议： 下拉菜单应该是“万不得已”的用户界面显而易见的总是胜利视频：使用广播组进行输入其他不错的选择是收音机组，...
android-segmented-control.zip
07-30
android-segmented-control.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
android-segmented-control-view.zip
07-30
android-segmented-control-view.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
segmented-control：React Native SegmentedControl库
02-05
@react-native-community/segmented-control React本机SegmentedControl库。 使用SegmentedControl呈现UISegmentedControl iOS。 对于Android和Web，它具有一个js实现，可模拟iOS 13风格的UISegmentedControl。 ...
vite+ts+mock+vue-router+pinia实现vue的路由权限
beekim的博客
05-20 386
vite.config.ts配置。
基于vuestic-ui实战教程 - 页面篇
PleaseBeStrong的博客
05-21 1013
原有的table组件不够美观，想要自己定义的时候就可以用该模板，对于模板的实例如上图我用红色框框框出来的就是几个加入的组件，下面就分别在代码中实现上面的代码中提到了特别多的类型比如UserData 、Pagination 、Sorting 等等，下面就给出这些类型的定义（如下代码定义在api/system/sysUser/types.ts 中）前面两个完全根据后端的实体类对应，而下面三个就是渲染所需要用到的一些类型定义/* sysUser参数类型 *//* sysUser参数类型*/
Vue从入门到实战Day07
ltt159264的博客
05-21 1022
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
VUE3注册指令的方法
weixin_44072254的博客
05-22 503
【代码】VUE3注册指令的方法。
Vue 组件生命周期：探索钩子
最新发布
https://blog.amd794.com
05-27 252
1.1 什么是 Vue 组件生命周期？创建前（beforeCreate）创建后（created）载入前（beforeMount）载入后（mounted）更新前（beforeUpdate）更新后（updated）销毁前（beforeDestroy）销毁后（destroyed）在每个阶段，Vue 框架都提供了特定的钩子函数，开发人员可以在这些函数中编写自定义的代码，从而实现对组件生命周期的控制和管理。1.2 为什么需要了解生命周期？了解组件的运行机制，提高开发效率。
uni-segmented-control的点击事件
05-27
`uni-segmented-control` 组件的点击事件可以通过监听它的 `change` 事件来实现。当用户点击选项卡时，`change` 事件会触发，传递一个参数 `event`，其中包含了用户点击的选项卡的索引值。 你可以在 `change` 事件的回调函数中获取这个索引值，并进行相应的操作。例如，可以根据不同的索引值展示不同的内容。 以下是一个示例代码： ```html <template> <view> <uni-segmented-control @change="handleChange" :current="current"> <uni-segmented-control-item title="选项1"></uni-segmented-control-item> <uni-segmented-control-item title="选项2"></uni-segmented-control-item> <uni-segmented-control-item title="选项3"></uni-segmented-control-item> </uni-segmented-control> <view v-if="current === 0">选项1的内容</view> <view v-if="current === 1">选项2的内容</view> <view v-if="current === 2">选项3的内容</view> </view> </template> <script> export default { data() { return { current: 0 // 默认选中第一个选项卡 } }, methods: { handleChange(event) { this.current = event.detail.index // 获取用户点击的选项卡的索引值 } } } </script> ``` 在这个示例代码中，我们监听了 `uni-segmented-control` 组件的 `change` 事件，并在回调函数中获取了用户点击的选项卡的索引值。然后根据不同的索引值展示了不同的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值