uni-app可替换radio-group的控件uni-segmented-control（十九）

最新推荐文章于 2025-03-21 08:00:00 发布
最新推荐文章于 2025-03-21 08:00:00 发布
阅读量396 收藏
点赞数
分类专栏： C#开源架构分析 uni-appy、WPF、.netMaui开发 文章标签： uni-app segementControl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/A_nanda/article/details/140949878
版权

 【前言】 以前写过一篇对radio-group中的元素进行分列展示的文章，有兴趣的朋友可以看以下uni-app将radio-group元素分列展示（七）：专栏管理-优快云创作中心icon-default.png?t=N7T8https://mp.youkuaiyun.com/mp_blog/manage/column/columnManage/12711831当时主要是因为radio-group中的元素过多，如果利用手机下拉查找的话，数据大于10条个人感觉不是很友好；最近发现一个新的控件感觉比radio-group的效果可能更好一些，因此在这里进行分享。

效果图：

了解本专栏 订阅专栏 解锁全文
uni-app将radio-group元素分列展示（七）
A_nanda的博客
05-17 721
点检类型:</view></view>--复选框改成下拉列表--><view class="title driverdata">设备类型:
关于uni-app中SegmentedControl 分段器不显示的问题
笨蛋的博客
04-18 1923
又到了毕设的季节，年前考研随手开题报告就写了一个关于uni-app的开发，本来想着应该简单，结果在看https://www.bilibili.com/video/BV1D5411t74T?p=27&t=56这个视频的分段器的时候怎么调试也不成功，一直报这个错误。 一开始以为是 “本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。 如需通过npm方式使用uni-ui组
uniapp 制作一个可复用的segmented-control（tab选项卡）
weixin_33941350的博客
03-26 838
开局一张图，内容全靠编 1.开局一张图（先上效果图） 2.内容全靠编 开始编写复用组件： segmented-control.vue <template> <view id="segmented" class="segmented" :style="{top:stickyTopData+'px'}"> <view class="l...
Vue3+UniApp：在单个页面实现固定 TabBar 的多种方式
最新发布
码农研究僧的博客
03-21 2447
在 UniApp 开发中，tabBar 通常是通过 pages.json 配置的，适用于整个应用的全局导航。然而，在某些场景下，我们可能需要只在特定的页面展示 tabBar，而不会影响其他页面的布局。这就需要使用 自定义 tabBar，可以通过 view 组件、uni-segmented-control 组件或 uni-nav-bar 组件等方式来实现。
uniapp组件-uni-segmented-control分段器
热门推荐
03-01 1万+
官方示例：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.
微信小程序_uni-app_分段器_uni-segmented-control
王大锤的博客
05-19 3405
写在前边：《微信小程序_···》系列的博文，是学习了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内置radio-group设置大小和颜色
m0_60459392的博客
10-10 1266
style="transform:scale(0.6)" 是大小。uniapp内置radio-group设置大小和颜色。
uniapp中的radiogroup组件中的radio不能单选的问题
yqx_123的博客
04-12 7034
新手刚入门uniapp，在昨天遇到了一个小问题：在
uniapp的radio-group动态赋值
Mr_ZhangAdd的博客
12-23 3971
<radio-group @change="radioChange" style="margin-left: 40rpx;"> <radio style="margin-right: 40rpx;" value="1" :checked="radioValue==1" >生产</radio> <radio style="margin-right: 40rpx;" value="2" :checked="radioValue==2" >订单<.
uniapp 单选框 radio-group 组件change方法传递多个参数
nelly521的博客
08-14 1395
【代码】uniapp 单选框 radio-group 组件change方法传递多个参数。
uni-ui app分段组件uniSegmentedControl使用
weixin_49651379的博客
11-25 3508
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单选框radio-group动态赋值
imcholl的博客
05-24 5122
uniapp 官网关于单选框的详解 ：https://uniapp.dcloud.io/component/radio.html 实现思路 定义一个变量conclusionRadio，checked的状态通过更改这个值去更新。 可以根据业务场景调用updateConclusionStatus(true) 或者 updateConclusionStatus(false) 方法 代码如下 <view class="chk-conclusion"> <label class="label-ti
uni-app的组件（二）
2302_78070106的博客
01-17 1897
uni-app的组件
一个简单的radiogroup绑定
tanyumin123的博客
01-26 1513
加粗样式@TOC 欢迎使用Markdown编辑器 <template> <view> <view class="uni-list"> <radio-group @change="radioChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"> <view>
uni-segmented-control插件使用
yanhaijunyan的博客
05-11 943
3.看到如下提示(已经可以在目标项目中使用插件啦)2.进入dcloud插件市场下载目标插件。1.HBuildX打开目标项目。
uniapp中的单选实例（ radio）
babyxuqian的博客
11-04 1万+
radio-groupsd 单项选择器，内部由多个<radio>组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。 属性说明 属性名 类型 默认值 说明 @change EventHandle <radio-group>中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} radio 单选项目。 属性说明 属......
uniapp uni-segmented-control插件子元素的宽度样式修改
qzkgq的博客
10-29 369
在uniapp中使用uni-segmented-control，由于项目需求需要，可左右滑动且分类较多，发现这个插件在中类名后编译为微信小程序后，会自动在类名后添加标识，导致无法选中类名，新增传递参数，在源码中判断是否需要新增类名。
uniapp uni-segmented-control onReachBottom失效
10-12
uni-app的uni-segmented-control组件中的onReachBottom事件表示当滚动到底部时触发的回调函数。然而，如果你发现这个事件并未如预期那样在内容区域完全滚动到底部时触发，可能是以下几个原因： 1. 检查配置：确认`onReachBottom`属性是否已经正确地设置到你的`uni-segmented-control`上，并且事件处理器是否有效。 ```html <view class="segmented-control" @on-reach-bottom="handleBottomEvent"> <uni-segmented-control :options="options" /> </view> ``` 2. 视图结构：确保`uni-segmented-control`下面有足够的内容可供滚动。如果没有足够的内容，该事件是不会触发的。 3. 其他滚动视图影响：如果有其他滚动视图遮挡了`uni-segmented-control`，并且它们先于它达到底部，那么`onReachBottom`事件可能不会触发。你需要确保`uni-segmented-control`是最后一个可滚动的元素。 4. 滚动高度计算：有时候浏览器的行为可能会导致滚动高度的计算不准确。你可以尝试手动测量滚动容器的高度并与可视区比较，看是否真的达到了底部。 如果以上排查都没有问题，还无法解决，可能是uni-app的某个版本更新中对事件处理有改动，建议查阅官方文档或更新到最新版看看是否修复了这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A_nanda

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值