小程序版---js进度条，完成及未完成状态的变化

wxml:

<!--components/processMenu.wxml--> <view class="processMenu">   <view class="process">     <view class="curProcess" style="width:{{processBar}}%"></view>   </view>   <view class="nodeContainer">     <view wx:for="{{process}}" wx:key="index" class="node">       <view class="processNode">         <image wx:if="{{item.isFinish}}" src="../../static/images/finish.png"></image>         <text class="title" style="color: {{item.isFinish ? '#000' : ''}}">{{item.title}}</text>       </view>     </view>   </view> </view>   css: /* components/processMenu.wxss */ .processMenu {   width: 80%;   margin: 0 auto;   padding-top: 15rpx; } .nodeContainer {   display: flex;   justify-content: space-between; } .processMenu .processNode {   position: relative;   margin-top: -15rpx;   width: 28rpx;   height: 28rpx;   background-color: rgba(153, 153, 153, .4);   border-radius: 50%;   display: flex;   align-items: center;   justify-content: center; } .processMenu .processNode::before {   content: '';   display: block;   width: 20rpx;   height: 20rpx;   background-color: #999;   border-radius: 50%; } .processMenu .node .title {   position: absolute;   top: 40rpx;   color: #666;   font-size: 22rpx;   white-space: nowrap; } .processMenu .process {   margin: 0 auto;   width: 90%;   height: 6rpx;   background-color: #E5E5E5; } .processMenu .curProcess {   height: 100%;   background-color: #DA202B; } .processNode image {   position: absolute;   width: 100%;   height: 100%; }   js: // components/processMenu.js Component({   /**    * 组件的属性列表    */   properties: {
  },
  /**    * 组件的初始数据    */   data: {     process: [       {         isFinish: true,         title: '基本信息确认'       }, {         isFinish: false,         title: '产品信息确认'       }, {         isFinish: false,         title: '单证'       }, {         isFinish: false,         title: '签名环节'       }     ],     processBar: 0   },   attached () {     this.init()   },   /**    * 组件的方法列表    */   methods: {     init () {       let step = -1       this.data.process.forEach((item, index) => {         if (item.isFinish) {           step = index         }       })       if (step === 0) {         this.setData({           processBar: 50 / (this.data.process.length - 1)         })       } else if (step === this.data.process.length - 1) {         this.setData({           processBar: 100         })       } else {         this.setData({           processBar: (100 * step + 50) / (this.data.process.length - 1)         })       }     }   } })  

标签：title,process,进度条,js,color,step,完成,height,processMenu,js进度条
来源： https://www.cnblogs.com/sq652366/p/13063941.html