小程序自定义步骤条实现

效果展示:

支持背景颜色自定义

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) {
      // 页面尺寸变化
    }
  },
})
相关推荐
2501_9159184120 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张21 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差1 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张1 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬1 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106321 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI1 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220691 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld1 天前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄2 天前
mobx-miniprogram小程序的数据传输
小程序