小程序自定义步骤条实现

效果展示:

支持背景颜色自定义

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) {
      // 页面尺寸变化
    }
  },
})
相关推荐
说私域39 分钟前
精准零售驱动下的中国零售业变革与“开源 2+1 链动小程序”应用探究
人工智能·小程序·开源
qq_174482857517 小时前
基于微信小程序的小动物救助领养平台
微信小程序·小程序
wcy01121 天前
微信小程序+Vant-自定义选择器组件(单选带筛选
微信小程序·小程序
Fresh-eyes1 天前
iphone小程序设置burpsuite代理抓包
运维·服务器·小程序
paterWang1 天前
小程序-基于java+SpringBoot+Vue的铁路订票平台小程序设计与实现
java·spring boot·小程序
流着口水看上帝1 天前
一文掌握如何用python开发小程序
python·小程序
非著名程序员1 天前
15分钟做完一个小程序,腾讯这个工具有点东西
小程序
1登峰造极1 天前
uniapp中uni-popup在小程序中滚动穿透问题
小程序·uni-app
我很苦涩的1 天前
原生微信小程序画表格
微信小程序·小程序·notepad++
家里有只小肥猫1 天前
微信小程序上传启用组件按需注入
微信小程序·小程序