unapp uni-steps 竖向 左边布局，desc很多的情况下，布局乱掉了

已于 2024-12-11 14:17:26 修改
阅读量286 收藏
点赞数 3
CC 4.0 BY-SA版权
文章标签： uni-app
于 2024-12-11 11:12:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shellyao/article/details/144395566
uni-app - 全端兼容 Steps 步骤条组件（支持绑定点击事件、颠倒文字位置、自定义样式）解决 uview 组件库的 Steps 步骤条无法绑定点击事件且不兼容微信小程序，详细教程组件插件源码
资深程序员
11-18 5714
uni-app官方的步骤条组件设置active-color无效，uniapp插件steps步骤条组件给每个步骤绑定点击事件官网Steps步骤条插件怎么让文字在下方显示uniapp步骤条组件uni-app解决uview组件库的Steps步骤条组件不兼容微信小程序且无法绑定每项的点击事件，uviewSteps步骤条不兼容小程序，uni-appuni-steps步骤条组件怎么绑定点击事件，uni-steps步骤条怎么自定义样式插槽，uviewSteps步骤条组件怎么去掉步骤图标后面的白色背景小块
uni-app步骤条steps源码解析（十八）
A_nanda的博客
08-06 798
例如：网上购买一个商品需要先在网上下单-->当地物流人员取件-->中间物流转送--->目的地物流接收--->配送到买家手中；* @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]activeColor： 选中状态的颜色 options： 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
uniapp 电商app 步骤条功能的使用
yehaocheng520的博客
12-01 7267
步骤条功能 原型图如下图所示： dcloud插件市场中是有现成的组件的： 使用方法 script中引入 import uniSteps from '@/components/uni-steps/uni-steps.vue' export default { components: {uniSteps} } template中使用 <uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事
uniapp 自定义steps
最新发布
m0_63542260的博客
06-09 378
Stepper :current="1" :steps="[{ title: '步骤一', desc: '描述信息' }, { title: '步骤二', desc: '描述信息'}, { title: '步骤三', desc: '描述信息'}]"></Stepper>
uniapp使用u-steps，再同一页面切换多个u-steps致使下拉线样式错误
SpitFire_Dinosau的博客
03-19 1488
解决办法 去文件中找到uview-ui中steps页面，如下是我的地址。同一页面，进行切换steps，发现第二个steps，再methods init（）中添加一个。
uni-app纵向步骤条
weixin_42079403的博客
03-21 1676
分享一下项目中自封装的步骤条，存个档~1. 话不多说，先看效果。
uView 中 Steps 步骤条，竖向步骤条不展示
qq_39891453的博客
03-27 2378
如图：
uniapp steps步骤条 uview组件 实现样式如图~
weixin_42560947的博客
04-27 7199
uniapp uview组件 steps步骤图 实现样式如图~
uniapp横竖屏内容错乱问题
QQ_852213985
12-18 684
<template> <view> <button type="default" @click="horiScreen">横屏</button> </view> </template> <script> export default { data() { return { } }, onResize() { }, onShow() { //#ifdef APP-PLUS
uview组件库中u-steps （步骤条）中内容添加自定义内容
qq_59174470的博客
07-12 1503
随意添加内容
uniapp 实现的步进指示器组件
狼性书生
03-13 491
采用 uniapp 实现的一款步进指示器组件，展示业务步骤进度等内容，对外提供“前进”、“后退”方法，让用户可高度自定义所需交互，适配 web、H5、微信小程序（其他平台小程序未测试过，可自行尝试）
uniapp组件-uni-steps 步骤条
03-03 1万+
效果图： 代码实现： <template> <view> <uni-steps :options="list1" active-color="#007AFF" :active="active" /> <uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" /> <button type="primary" @cli
uniapp中u-steps自定义内容
dp17893的博客
03-26 2634
直接调用接口数据进行渲染，就可以使用。
自定义vant ui steps组件效果实现
sxl131415的博客
07-06 1253
https://www.cnblogs.com/secretAngel/p/10599165.html
uniapp小程序步骤条封装和调用
weixin_47038177的博客
10-26 2283
说明：这里我还使用了uni-icon，这个同样需要插件市场下载然后引入。到现在就已经完成了，如果有报错信息注意是否安装好了icon插件。
uniapp 封装进度条组件
weixin_42066070的博客
11-23 1761
【代码】uniapp 封装进度条组件。
vue使用steps步骤条，自定义内容
热门推荐
weixin_44197797的博客
11-19 1万+
效果图 一、引入element ui steps <el-steps :active="caseHistoryData.length" finish-status="success" direction="vertical" > <el-step> <template slot="description"> </template> </el-step> </el-steps> 二、在tem
前端vue uni-app多图片上传组件，支持单个文件，多个文件上传 步骤条step使用
chenchuang0128的博客
05-30 3392
提交
自定义uView中步骤条的内容
Lnbd_的博客
03-17 3528
自定义uView中步骤条的内容
uni-app的uni-steps自定义样式
03-04
### 如何对uni-app中的uni-steps组件进行自定义样式 在uni-app开发环境中，`uni-steps` 是一个用于展示流程进度的组件。为了实现对该组件样式的个性化定制，可以通过覆盖默认CSS类的方式来进行调整。 #### 使用全局样式修改 如果希望在整个应用范围内改变 `uni-steps` 的外观，则可以在项目的根目录下的 `App.vue` 或者公共样式文件中添加如下代码： ```css /* 修改步骤条的颜色 */ .uni-steps__item-title { color: red !important; } /* 调整已完成状态的小圆圈颜色 */ .uni-steps--horizontal .uni-steps__finish-line, .uni-steps--vertical .uni-steps__finish-line { background-color: green !important; } ``` 上述方法适用于想要统一管理整个应用程序内所有实例风格的情况[^1]。 #### 局部作用域内的样式重写 对于仅需针对特定页面或局部区域更改 `uni-steps` 外观的情形，在对应页面的 `<style scoped>` 中加入相应规则即可： ```html <template> <view class="custom-step"> <!-- 这里的 customStepClass 将会应用于 uni-steps --> <uni-steps :options="stepsOptions" activeColor="#FF0000"></uni-steps> </view> </template> <style lang="scss" scoped> .custom-step /deep/ .uni-steps__item-title { font-size: 18px; color: blue; } .custom-step /deep/ .uni-steps--horizontal .uni-steps__finish-line, .custom-step /deep/ .uni-steps--vertical .uni-steps__finish-line { height: 6px; border-radius: 3px; background-color: orange; } </style> ``` 这里使用了 `/deep/` 深度选择器来穿透 Vue 单文件组件的作用范围限制，从而能够有效地影响子组件内部元素的样式[^2]。 #### 利用属性配置简化操作 除了直接编写 CSS 来控制显示效果外，还可以利用 `uni-steps` 提供的一些内置属性快速设置某些视觉特性，比如通过 `activeColor` 参数指定激活状态下线条及文字的颜色等: ```html <uni-steps :options="stepsData" activeColor="#ff5722"></uni-steps> ``` 这种方法简单直观，适合那些只需要做少量改动的需求场景[^3]。 #### 实现示例 下面给出一段完整的 HTML 和 JavaScript 结合的例子，展示了如何在一个简单的页面上加载并美化 `uni-steps` 组件： ```html <template> <view> <text>订单处理流程：</text> <uni-steps :options="orderProcessSteps" direction="column" activeColor="#E91E63"/> </view> </template> <script> export default { data() { return { orderProcessSteps: [ {title: '提交订单', desc: ''}, {title: '支付成功', desc: ''}, {title: '商家接单', desc: ''}, {title: '配送途中', desc: ''}, {title: '完成交易', desc: ''} ] } } }; </script> <style lang="scss" scoped> /deep/ .uni-steps--column .uni-steps__head{ width: 24rpx; height: 24rpx; } /deep/ .uni-steps--column .uni-steps__line{ left: 12rpx; top: 12rpx; bottom: -12rpx; width: 2rpx; } /deep/ .uni-steps--column .uni-steps__icon-wrap{ line-height: 24rpx; } /deep/ .uni-steps--column .uni-steps__content{ padding-left: 36rpx; } </style> ``` 此段代码不仅设置了垂直方向上的步骤指示器布局方式(`direction="column"`),还特别优化了各部分之间的间距以及图标大小等问题,使得整体看起来更加美观协调.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值