uniapp 封装进度条组件

已于 2022-11-23 11:03:26 修改
阅读量1.5k 收藏
点赞数
分类专栏： uniapp iview 文章标签： uni-app
于 2022-11-23 11:02:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42066070/article/details/127987287
版权

 一、素材准备（5张图片，第一张高亮图、第二张灰色、第二张高亮、第三张灰色、第四张高亮）

免费给大家，本人自己设计的。

链接：https://pan.baidu.com/s/18sz5ORSYuPbf_4fpureRMQ 
提取码：bpyj

如果链接失效了，请在底下评论，看到会马上更新。

二、写啥废话，直接代码上封装的组件代码

1.先引入uview-ui,uniapp不懂引入uview-u组件的自行移步到官网。很简单。

2.使用uview-ui UI组件自带的u-steps这个

3.父组件传递process数据类型为number，默认从0开始，0，1，2分别表示第一、第二、第三步，父组件的代码如下👇

<uni-steps-index :process="queryForm.process || 0"></uni-steps-index>

4.子组件的代码如下👇

<template>
  <view>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
sunyin.liu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
基于uniapp封装的自适应table组件
01-09
基于uniapp封装的table组件，表格宽度自适应，高度自适应，表头以及内容只传数值即可
可以用手指拖动改变进度进度条
12-19
在android4.0下编译通过的。带滑块的进度条演示。可以用手指拖动改变进度。
自定义vant ui steps组件效果实现
sxl131415的博客
07-06 1146
https://www.cnblogs.com/secretAngel/p/10599165.html
uniapp中进度条实现打开页面进度条增长至全布加载完成（转）
最新发布
m0_62782752的博客
06-06 457
在uni-app中，可以通过页面的生命周期函数和API来实现进度条的增长，直至全部加载完成。递归调用自身，每次延迟200毫秒增加10%，直至进度条达到100%。在实际应用中，你可能需要在页面的。或其他生命周期中触发进度条增长，并在接收到数据或完成某些异步操作后更新进度条，最终在。用于跟踪进度条的当前百分比。中设置进度条为100%。
uniapp 可拖拽进度条、滑动条、评分条、movable-area
三三
02-24 7326
uniapp movable-area简单应用 sliderBar组件 <template> <view> <view class="slider-box"> <view class="flex"></view> <movable-area class="sliderBar" :style="{width: (100 - minScore)+'%'}"> <view class="gone" :styl
uniapp步骤条使用
junhian的博客
11-12 415
最近公司有一个这种需求，就是需要画一个简单步骤条，然后能显示进度。
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
weixin_48192398的博客
11-11 3082
uniapp 滑动条自定义样式
uniapp封装websocket，使用简单，下载即可使用，统一使用json收发消息，区分业务类型
02-19
uniapp封装websocket，使用简单，下载复制进项目即可使用，统一使用json收发消息，区分业务类型。 1、使用方法，在需要使用的页面导入改文件（也可以挂载全局） 2、onLoad方法调用this.socketObj = new WebSocketIO...
uniapp蓝牙封装.zip
07-17
标题“uniapp蓝牙封装.zip”指出的是一个针对uniapp框架的蓝牙功能封装项目。uniapp是一个基于Vue.js的多端开发框架，能够帮助开发者编写一次代码，跨平台运行，包括iOS、Android、H5等。在这个压缩包中，开发者已经...
uniapp封装好的request请求
08-06
uniapp封装好的request
uniapp组件封装请求封装
03-18
首先，uniapp请求API的封装主要是为了统一管理网络请求，提供更简洁、易用的接口。通常，我们会将axios或uni-request等网络请求库进行二次封装，创建一个自定义的服务层，如`apiService`。在这个服务层中，我们可以...
uniapp中环状进度条
scimence的专栏
06-21 1201
【代码】uniapp中环状进度条。
uniapp 实现拖拽进度条，可自定义传入值
weixin_43929450的博客
04-25 1434
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。在父组件页面调用方法就可以出现自定义传值了。什么是movable-view？
uniapp进度条
zxmcwn的博客
10-09 243
【代码】uniapp进度条。
uniapp中简单的进度条
热门推荐
gg0613的博客
03-27 1万+
本人小白，干这一行时间还短，出现什么问题望大佬指正。 话不多说，官方文档先借来使一使。 progress perent是需要动态变更的 进度条颜色分为已选择（activeColor）和未选择（backgroundColor）。只需要加到标签中，并选好自己想要的颜色，或者用在data中定义一个变量，用v-on动态改变。 如果想用一个更好看的进度条样式，可以去插件市场里面找找， ...
uni-app实现类似物流进度跟踪功能
rayong的博客
09-17 2549
文章目录1、物流进度跟踪的组件2、调用组件的页面3、页面的效果图 1、物流进度跟踪的组件 <template> <view class="steps"> <!-- <view class="steps_list"> <view class="node" :class="{'active-node':item.activity == item.index}"></view> <view class="tail" :cl
unApp 小程序开发如何实现视频或音频自定义可拖拽进度条
qq_39598092的博客
04-08 2221
　　程序原生组件的音频播放时并没有进度条的显示，而此次在我们所接的项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。视频和音频提供的api大致是相似的，可以根据以下代码修改为与音频相关的进度条。 wxml的结构如下: <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodown...
百度SEO站群WordPress轻拟物博客主题niRvana
百度SEO工具
01-12 675
发一款wordpress主题，叫niRvana，版本:4.5.3。ui界面、设计得很是有特色！ 主题介绍： 主题是响应式的，支持回复、评论下载，也可以设置注册登录后才能显示隐藏内容，更多的自定义小工具。文章支持语音朗读，自定评论表情，文章支持瀑布流，支持打赏、点赞，支持生成文章封面，支持切换色调。 下载地址： http://www.bytepan.com/ATAnlkhaFKO 主题界面截图： ...
uniapp封装常用组件
09-27
通过uni-app的easycom，可以将组件引入精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构，就可以直接在页面中使用，无需引用和注册。 在封装组件时，需要注意props可以是数组或对象，用于接收来自父组件的数据。在HTML中，属性名称是大小写不敏感的，所以浏览器会将所有大写字符解释为小写字符。因此，在封装组件时属性名为contentText，在传值时应为content-text。 以下是一些常用的uniapp封装组件的示例代码: 1. 空数据占位图组件： ``` <template> <view class="fq-empty"> <image src="/static/image/empty-view.png"></image> <text class="">{{emptyText}}</text> </view> </template> <script> export default { props: { emptyText: { type: String, default: '什么都没有', } }, } </script> <style> .fq-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; } .fq-empty image { width: 300rpx; height: 300rpx; margin: 30rpx; } </style> ``` 2. 分页组件： ``` <template> <view> <!-- 分页内容 --> </view> </template> <script> export default { props: { total: { type: Number, default: 0, }, pageSize: { type: Number, default: 10, }, currentPage: { type: Number, default: 1, } }, methods: { // 分页操作的方法 } } </script> <style> /* 样式 */ </style> ``` 3. 导航栏组件： ``` <template> <view> <!-- 导航栏内容 --> </view> </template> <script> export default { props: { title: { type: String, default: '', }, showBack: { type: Boolean, default: false, } }, methods: { // 导航栏相关操作的方法 } } </script> <style> /* 样式 */ </style> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

sunyin.liu

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

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

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

打赏作者

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

抵扣说明：

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

余额充值