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

主要通过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 () {

  }
})

最后

以上就是懦弱苗条最近收集整理的关于微信小程序流程进度样式实现的全部内容，更多相关微信小程序流程进度样式实现内容请搜索靠谱客的其他文章。