微信小程序-进度条展示

最新推荐文章于 2024-12-12 11:53:53 发布

原创

最新推荐文章于 2024-12-12 11:53:53 发布 · 2.9k 阅读

9 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何在微信小程序中创建两种不同的进度条展示方式：一种在不同阶段使用不同图标，并带有动画效果；另一种是高度自适应的进度条，利用iconfont实现图标的样式。

效果一：不同阶段用不同的图标显示，进行中的图标有动画效果。（进度条高度一致）

 <block wx:for="{
  
  {list}}" wx:key>
    <view class='order'>
      <view wx:if="{
  
  {index==0}}" class='icon in'></view>
      <view wx:if="{
  
  {index!=0 && index!=wuliu.length-1 && index!=wuliu.length-2}}" class='icon no_in'></view>
      <image wx:if="{
  
  {index==wuliu.length-2}}" src="../../images/icon/service.png" class="list-img"></image>
      <image wx:if="{
  
  {index==wuliu.length-1}}" src="../../images/icon/home.png" class="list-img"></image>
      <view class='list_centent'>
        <view class="tips">【{
  
  {item.status}}】</view>
        <view class='tips'> {
  
  {item.time}}</view>
      </view>
      <