微信小程序流程进度样式实现

主要通过flex布局结合切图来弄.

效果图:

wsss:

.steps{
  display:flex;
  flex-flow: row warp;
  margin-top: 20rpx;
  margin-left: 50rpx;
  margin-right: 50rpx
  /* justify-content:space-around */
}

.step{
   display:flex;
 /* border: 1rpx solid black; */
 
   flex-flow: column nowrap
}

.stepText{
  align-items: center;
  justify-content:space-around;
  font-family: 'HiraginoSansGB-W3';
  font-size: 23rpx
}

.step .img{
  width: 90rpx;
  height: 90rpx;
}

wsml:

<view class="steps">
      <block  wx:for="{{steps}}" wx:for-index="index" wx:for-item="item">
         <view class="step">
          <image class="img" src="/images/{{activeNum==(index+1)?'is':''}}done{{(index+1)}}.png"></image>
          <view class="stepText">{{item.stepName}}</view>
         </view>
         <view class="step">
          <image wx-if="{{(index+1)!=steps.length}}" class="img" src="/images/{{(index+1)<=activeNum?'blueline.png':'greyline.png'}}"></image>
          <view class="stepText"></view>
         </view>
      </block>
</view>

js:

// pages/progress/progress.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    activeNum:3,
    steps: [{ 'stepName': '填写信息' }, { 'stepName': '证件上传' }, { 'stepName': '业务提交' }, { 'stepName': '审核结果' }]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})