小程序流程进度条

最新推荐文章于 2024-02-27 18:03:57 发布
最新推荐文章于 2024-02-27 18:03:57 发布
阅读量699 收藏 1
点赞数
分类专栏： 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43789753/article/details/106401455
版权
本文介绍了如何在小程序中创建流程进度条，并提供了一种避免进度条和原点偏离的解决方案。通过分解进度条为单独的组件，并在JS中动态控制亮点及进度，实现了更精确的布局控制。
摘要由CSDN通过智能技术生成

展示效果
在这里插入图片描述
wxml:

<view class="progress">
    <view class="libao rad1">
        <view>10人</view>
        <view class="radius radius_active"></view>
        <view class="imgs">礼包</view>
    </view>
     <view class="libao rad2">
        <view>20人</view>
        <view class="radius {
   {radius_active}}"></view>
        <view class="imgs">礼包</view>
    </view>
     <view class="libao rad3 ">
        <view>30人</view>
        <view class="radius "></view>
        <view class="imgs">礼包</view>
    </view>

      <progress percent="{
   {per}}" activeColor="#F86221" backgroundColor="#E0E2E7" stroke-width="4" class="pro_border"/>
    </view>

wxss

/* progress */
 .progress{
   
  width:100%;
  height:260rpx;
  display: -webkit-flex;
  position:absolute;
  top:17%;
}
.progress .pro_border{
   </
最低0.47元/天 解锁文章
菜柔柔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序进度条样式_微信小程序实现流程进度的图样式功能
weixin_39753747的博客
12-20 788
最近正在做微信小程序，需要实现一个流程进度的图样式如下面需求：没完成的灰色小圆点表示完成的使用蓝色小圆点设置当前状态使用有外圈的小圆点表示实现起来比较简单，实现思路，使用一个列表实现，列表中的每一个item的样式如下图使用win10画板画的不好看图上的意思就是每个item 前面有一段线条 中间是个圆圈然后后面有一段线条。之所以这样是因为下面的文字需要居中显示在圆圈的下面。如果不需要文字的话可以一个...
小程序实现流程进度条功能
meteorites的博客
11-23 4156
&lt;view class="progress"&gt; &lt;view class="radius rad_1 radius_active"&gt;1&lt;/view&gt; &lt;view class="radius rad_2 radius_active"&gt;2&lt;/view&gt; &lt;vie
制作进度条小程序
h1091068389的博客
03-31 2295
进度条程序注意事项回车和换行Linux刷新策略fflush编写思路代码样例编译代码make原理make使用 这里我们来看一下如何制作一个动态增长的进度条小程序 注意事项 回车和换行 要想做一个动态增长的进度条程序，我们需要了解一下Linux下的屏幕刷新策略 执行下面一行代码我们可以看到程序在每间隔1秒的时候会换行打印从10到1的数字，但是进度条程序可不能进行换行打印，需要在同一行上打印，这时候就需要了解一下回车和换行的区别了。 #include<stdio.h> #include<uni
微信小程序-进度条展示
ChibiMarukoChan的博客
05-28 2775
效果一：不同阶段用不同的图标显示，进行中的图标有动画效果。（进度条高度一致） <block wx:for="{{list}}" wx:key> <view class='order'> <view wx:if="{{index==0}}" class='icon in'></view> <view wx...
流程进度条案例
novc_rj12的博客
04-05 387
流程进度条前言总结 前言 最近在公司里面看到了流程进度条的需求，然后在网上找了许多案例发现使用起来有些复杂，所以就根据公司的需求自己写了一个小案例，主要是使用vue+css实现，下面是我的代码，可以直接放在组件中引入使用，数据我是直接写死在data中这样更直观 # 二、代码 代码和图片示例如下（示例）： 下面展示代码。 // An highlighted block <template> <div class="box"> <div class="container
小程序一键链接WIFI
最新发布
weixin_57575133的博客
02-27 2438
【代码】小程序一键链接WIFI。
小程序 投票或砍价进度条
qq_41851047的博客
08-16 2188
示例图： 上代码： index.wxml: &lt;view class='clo_jdt'&gt; &lt;view style='width:{{width}}'&gt;&lt;/view&gt; &lt;/view&gt; &lt;view&gt;进度 &lt;text&gt;{{width}}&lt;/text&gt; &lt;/view
微信小程序实现流程进度功能
mingyunxiaohai的专栏
01-16 7320
最近正在做微信小程序，需要实现一个流程进度的图样式如下面 需求： 没完成的灰色小圆点表示 完成的使用蓝色小圆点设置 当前状态使用有外圈的小圆点表示 实现起来比较简单，实现思路，使用一个列表实现，列表中的每一个item的样式如下图 使用win10画板画的不好看 图上的意思就是每个item 前面有一段线条 中间是个圆圈然后后面有一段线条。之所以这样是因为下面的文字需要居中显示
微信小程序canvas画圆环形进度条
热门推荐
韩大璐
10-30 1万+
最近做一个小程序，有用到canvas画圆环形进度条，效果图就是上图了。 为了方便日后使用，我已经封装了一个独立的js文件。 先简单说一下实现流程，封装好的文件下载地址：https://github.com/SuperDalu/wxCanvas.git 先在wxml文件中创建画布 &lt;canvas canvas-id="runCanvas" id="runCanvas" class='ca...
微信小程序流程进度样式实现 步骤
08-30
在微信小程序开发中，创建美观且实用的流程进度样式是一个重要的设计环节，它能帮助用户了解当前任务的完成状态和接下来的步骤。本教程将详细讲解如何在微信小程序中实现这样的功能。 首先，我们需要理解微信小程序...
小程序圆形进度条代码包
10-23
在微信小程序开发中，圆形进度条是一种常见的...对于初学者，这是一个很好的学习案例，可以帮助理解微信小程序的开发流程和组件交互方式；对于有经验的开发者，它则可以作为一个便捷的组件库，快速集成到自己的项目中。
微信小程序-音乐播放器
01-27
微信小程序是一种轻量级的应用开发平台，主要针对移动端，它允许开发者通过编写JavaScript、WXML（微信小程序标记语言）...通过实践这个项目，开发者可以深入理解微信小程序的开发流程，并掌握创建一个完整应用的能力。
小程序开发必备demo
07-01
8. **其他组件**：如`progress`进度条，`slider`滑块，`icon`图标等，丰富了小程序的交互设计。 这些DEMO不仅包含了组件的基本用法，还会涵盖事件处理、数据绑定、API调用等实际开发中的常见场景。通过复制和修改...
微信小程序模仿QQ音乐和商城
06-02
微信小程序是一种轻量级的应用开发平台，主要针对移动端，它允许开发者在微信内构建原生体验的应用，无需安装即可使用，极大地提升了用户的便利性。在这个项目中，“微信小程序模仿QQ音乐和商城”，开发者旨在实现一...
小程序弹出授权用户信息和手机号
weixin_43789753的博客
06-15 2248
授权用户信息和授权手机号,可分开使用,必须用按钮触发 <button bindgetuserinfo="login" open-type="getUserInfo">获取授权</button> //获取授权 login:function(){ var that=this; wx.getSetting({ success: function(a) { a.authSetting["scop
小程序点击遮罩层隐藏点击内容不隐藏
weixin_43789753的博客
05-29 1589
遮罩层会出现当想点击遮罩的暗处时隐藏,可是点击内容也会隐藏,只要在最外层添加标识就可以区分遮罩层和弹出的内容了. //data-ref='self'重点 <view wx:if="{{show}}" class="classType" data-ref='self' bindtap="hide"> <view class="cont">弹出的内容</view> </view> //点击遮罩层后面空白处隐藏 hide:function(e){
小程序从底部弹出内容（抽屉式）
weixin_43789753的博客
06-29 1341
wxml: <view bindtap="shop" data-statu="open">点击弹出</view> <view class="zhezhao" data-statu="close" bindtap="close" wx:if="{{gouwu==true}}"> <view class="shoping" animation="{{animationData}}"> .
微信小程序视频播放
weixin_43789753的博客
06-23 920
video 微信开发文档 <view class="banner" wx:if="{{list.is_buy!=1}}">//is_buy是否已购买 <image src="{{list.bimg}}"></image> <image bindtap="menu_on" src="../../resource/video.png"></image> </view> <video
基于微信小程序音乐播放器的可行性分析
08-26
通过调用微信小程序提供的音频接口，可以实现歌曲的播放、暂停、切换等操作，同时可以利用小程序的界面组件，如进度条、歌曲列表等，提供良好的用户体验。 其次，微信小程序具有良好的跨平台特性，用户可以在微信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值