index.wxml 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <wxs src="../wxs/utils.wxs" module="utils" />
  2. <view class="custom-class {{ utils.bem('steps', [direction]) }}">
  3. <view class="van-step__wrapper">
  4. <view
  5. wx:for="{{ steps }}"
  6. wx:key="index"
  7. class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
  8. >
  9. <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
  10. <view>{{ item.text }}</view>
  11. <view>{{ item.desc }}</view>
  12. </view>
  13. <view class="van-step__circle-container">
  14. <block wx:if="{{ index !== active }}">
  15. <van-icon
  16. wx:if="{{ inactiveIcon }}"
  17. color="#969799"
  18. name="{{ inactiveIcon }}"
  19. custom-class="van-step__icon"
  20. />
  21. <view
  22. wx:else
  23. class="van-step__circle"
  24. style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
  25. />
  26. </block>
  27. <van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
  28. </view>
  29. <view
  30. wx:if="{{ index !== steps.length - 1 }}"
  31. class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
  32. />
  33. </view>
  34. </view>
  35. </view>
  36. <wxs module="status">
  37. function get(index, active) {
  38. if (index < active) {
  39. return 'finish';
  40. } else if (index === active) {
  41. return 'process';
  42. }
  43. return '';
  44. }
  45. module.exports = get;
  46. </wxs>