小程序自定义步骤条实现

效果展示:

支持背景颜色自定义

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) {
      // 页面尺寸变化
    }
  },
})
相关推荐
Ama_tor2 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
一只一只妖13 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设15 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru16 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉17 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊20 小时前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
paopaokaka_luck2 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所2 天前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck2 天前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序