效果展示:
支持背景颜色自定义
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) {
// 页面尺寸变化
}
},
})