小程序自定义步骤条实现

效果展示:

支持背景颜色自定义

javascript 复制代码
<view class="hl_steps">
  <view class="hl_steps_item" wx:for="{{steps}}" wx:key="id">
    <view class="hl_steps_item_circle_out" style="background-color: {{color[index%color.length][0]}};">
      <view class="hl_steps_item_circle_in" style="background-color: {{color[index%color.length][1]}};">
      </view>
    </view>
    <view class="hl_steps_item_box" style="background-color: {{color[index%color.length][0]}};">
      <view class="step_item_line" style="border-color: {{color[index%color.length][1]}};">
      </view>
      <view class="hl_steps_item_title">
        {{item.title}}
      </view>
      <view class="hl_steps_item_desc">
        {{item.desc}}
      </view>
    </view>
  </view>
</view>
css 复制代码
.hl_steps{
  overflow: hidden;
}

.hl_steps_item {
  display: flex;
  margin: 30rpx;
  box-sizing: border-box;
  position: relative;
}

.hl_steps_item_circle_out {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hl_steps_item_circle_in {
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.hl_steps_item_box {
  box-sizing: border-box;
  width: 100%;
  margin-left: 20rpx;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  position: relative;
}

.step_item_line {
  height: 100%;
  position: absolute;
  left: -42rpx;
  top: 38rpx;
  border-left: 2rpx dashed;
}

.hl_steps_item:nth-last-of-type(1) .step_item_line {
  border: none;
}

.hl_steps_item_title {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #363A44;
  line-height: 40rpx;
}

.hl_steps_item_desc {
  margin-top: 10rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #363A44;
  line-height: 40rpx;
}
javascript 复制代码
// components/bottom-pop/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    color: {
      type: Array,
      value: [
        ["rgba(254, 192, 48, .2)", "rgba(254, 192, 48, 1)"],
        ["rgba(147, 165, 164, .2)", "rgba(147, 165, 164, 1)"],
        ["rgba(0, 78, 204, .2)", "rgba(0, 78, 204, 1)"],
        ["rgba(79, 192, 141, .2)", "rgba(79, 192, 141, 1)"],
      ]
    },
    steps: {
      type: Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isIphoneX: false,
    animationData: {}
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

  pageLifetimes: {
    show: function () {
      // 页面被展示
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function (size) {
      // 页面尺寸变化
    }
  },
})
相关推荐
数据皮皮侠1 分钟前
最新上市公司业绩说明会文本数据(2017.02-2025.08)
大数据·数据库·人工智能·笔记·物联网·小程序·区块链
不如摸鱼去16 小时前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
微信小程序·小程序·uni-app·aigc·ai编程
weixin_lynhgworld1 天前
剧本杀小程序系统开发:构建剧本杀社交新生态
小程序
说私域1 天前
基于定制开发开源 AI 智能名片 S2B2C 商城小程序的热点与人工下发策略研究
人工智能·小程序
weixin_lynhgworld1 天前
陪诊小程序系统开发:让就医不再是一件难事
小程序
weixin_lynhgworld2 天前
盲盒抽谷机小程序系统开发:从0到1的完整方法论
小程序
weixin_lynhgworld2 天前
短剧小程序系统开发:赋能创作者,推动短剧艺术创新发展
小程序
一匹电信狗2 天前
【C++】异常详解(万字解读)
服务器·c++·算法·leetcode·小程序·stl·visual studio
说私域2 天前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务优化及复购转介绍提升策略研究
人工智能·小程序
熬耶3 天前
Uniapp之微信小程序自定义底部导航栏形态
微信小程序·小程序·uni-app