当前位置： 首页 > 资讯

微信小程序实现流程进度功能实例分享

发布日期： 2018-01-23 阅读量： 作者： 网络

微信小程序可以说是非常火了，最近正在做微信小程序，需要实现一个流程进度功能，本文主要和大家分享微信小程序实现流程进度功能，希望能帮助到大家，的图样式如下面：

微信小程序实现流程进度功能实例分享

需求：

没完成的灰色小圆点表示
完成的使用蓝色小圆点设置
当前状态使用有外圈的小圆点表示

实现起来比较简单，实现思路，使用一个列表实现，列表中的每一个item的样式如下图

使用win10画板画的不好看

图上的意思就是每个item 前面有一段线条中间是个圆圈然后后面有一段线条。之所以这样是因为下面的文字需要居中显示在圆圈的下面。如果不需要文字的话可以一个圆圈后面跟一条直线会更简单一点。

按照上面的图片，html布局为下面

   <view class='order_process'>
      <view class='process_wrap' wx:for="{{processData}}" wx:key="">
        <view class='process'>
          <view class='process_line' style="background:{{item.start}}"></view>
          <image class='process_icon' src="{{item.icon}}"></image>
          <view class='process_line' style="background:{{item.end}}"></view>
        </view>
        <text class='process_name'>{{item.name}}</text>
      </view>
    </view>

# 小程序 # 功能 # 进度

相关文章：想要通过网上接单赚钱，你需要具备这五大能力！减肥产品企业网络推广,减肥产品b2b信息网网站引流7大坑，网站推广专家来分享(二) 通过qq群营销、微信营销、网站营销等方式售卖网络课程月入过万项目分享！竞价广告该如何投放，有什么技巧可借鉴的？全网营销推广的几种方式？ 2020年适合个人站长们通过网站赚钱的5大网站类型！广告联盟评测网是干什么的？上面的联盟测评和评价都真实可靠吗？这样做，你的网站更受欢迎，网站推广妙招 cpa推广之利用微信引流吸粉的四个方法 cpc广告怎么做才能达到最好的效果？6大cpc广告操作技巧分享！点击率怎么赚钱的？点击广告赚钱的平台都有哪些？造成网络营销效果不理想的五大误区！掌握这10个免费的app推广方法，app想没流量都难！ cps联盟是什么？cps广告联盟是如何推广赚钱的？联盟广告和SEM竞价广告、信息流广告以及DSP广告四者之间有什么不同？最受欢迎、效率最高的3种APP推广方法以及相关实用小技巧！新上线的网站运营该如何做？建议从这8个方面着手！新手应该如何操作cpa广告联盟上的cpa项目赚钱？网站加入广告联盟营销的4大优点以及成功赚钱的2大要素！箱包怎么做网络推广,箱包免费发布推广的平台百度广告联盟怎么加入？申请条件有哪些？做CPS广告推广的几个要点和细节，一定要记好了！网站推广人员不得不注意的5大点联盟营销是什么意思？最早的联盟营销平台是哪个你知道吗？ cpa广告联盟存在的意义以及发展的前景是怎样的？高佣联盟赚钱是真的吗？高佣联盟怎么赚钱，有哪些技巧和方法？一位日赚1000+的cpa大神的实操经验分享！ app线下推广（地推）的三种主要方式，学会了事半功倍！【干货】小白如何在百度联盟上月赚3000+？实操经验分享

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯759 】【 SEO推广742 】

上一篇: 怎么安装wordpress？详解安装教程（图文）

下一篇: js 如何提升用户体验

4007654355
915688610@qq.com
深圳市南山区粤海街道高新区社区高新南七道011号高新工业村T3栋

APP开发

小程序开发

物联网开发

系统开发