1.实现效果
微信图片_20220725222751.jpg
2.实现原理
方法一：
页面总宽：750rpx ，去除相应间距等，留有长度600rpx左右。当列表的索引为0时，不显示步骤条横线， 即每个步骤条的宽度为600/(总步骤数-1）rpx。
flex横向布局，均匀排列每个元素，每个元素宽度为100rpx，当数据过多时，向内挤压该元素。
方法二：
progress:进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
将progress定位在图片中间，通过计算相应比例，设置激活百分比。
设置总宽度为600rpx。每份的长度为100/（总步骤数-1），百分比为每份的长度*（激活的总步数-1）
eg：
image.png
3.实现代码
//方法一：
{{item.pro_name}}
//方法二：
{{item.pro_name}}
page {
padding-bottom: 20px;
}
.con {
padding: 24rpx 20rpx;
margin: 20rpx;
background: #FFFFFF;
border-radius: 8rpx;
}
.head {
display: flex;
justify-content: space-between;
position: relative;
}
.head_info {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
width: 100rpx;
text-align: center;
}
.head_icon {
width: 32rpx;
height: 32rpx;
z-index: 1;
}
.head_title {
margin-top: 10rpx;
font-size: 20rpx;
line-height: 28rpx;
color: #333333;
}
.head_line {
position: absolute;
top: 16rpx;
right: 35%;
height: 2rpx;
background: #ccc;
}
progress {
width:600rpx;
position: absolute;
top: 13%;
left: 5%;
}
Page({
data: {
list: [{
stepInfo: [{
status: 1,
pro_name: '提交申请'
},
{
status: 1,
pro_name: '审核不通过呢'
},
],
sel_icon: "../img/circle02.png",
pro_color: '#3DB969'
},
{
stepInfo: [{
status: 1,
pro_name: '提交申请'
},
{
status: 1,
pro_name: '审核不通过呢'
},
{
status: 1,
pro_name: '卖家不同意,无须退回'
},
],
sel_icon: "../img/circle02.png",
pro_color: '#3DB969',
},
{
stepInfo: [{
status: 1,
pro_name: '提交申请'
},
{
status: 1,
pro_name: '审核不通过呢'
},
{
status: 1,
pro_name: '卖家不同意,无须退回'
},
{
status: 0,
pro_name: '退款失败'
},
],
sel_icon: "../img/circle02.png",
pro_color: '#3DB969',
},
{
stepInfo: [{
status: 1,
pro_name: '提交申请'
},
{
status: 1,
pro_name: '审核不通过呢'
},
{
status: 1,
pro_name: '卖家不同意,无须退回'
},
{
status: 1,
pro_name: '退款失败'
},
{
status: 0,
pro_name: '请重新提交申诉'
},
],
sel_icon: "/img/cart_select.png",
pro_color: '#DE59A3',
},
{
stepInfo: [{
status: 1,
pro_name: '提交申请'
},
{
status: 1,
pro_name: '审核不通过呢'
},
{
status: 1,
pro_name: '卖家不同意,无须退回'
},
{
status: 1,
pro_name: '退款失败'
},
{
status: 1,
pro_name: '请重新提交申诉'
},
{
status: 0,
pro_name: '申诉中'
},
],
sel_icon: "/img/cart_select.png",
pro_color: '#DE59A3',
},
{
stepInfo: [{
status: 1,
pro_name: '提交申请'
},
{
status: 1,
pro_name: '审核不通过呢'
},
{
status: 1,
pro_name: '卖家不同意,无须退回'
},
{
status: 1,
pro_name: '退款失败'
},
{
status: 1,
pro_name: '请重新提交申诉'
},
{
status: 1,
pro_name: '申诉中'
},
{
status: 0,
pro_name: '申诉失败'
},
],
sel_icon: "/img/cart_select.png",
pro_color: '#DE59A3',
},
{
stepInfo: [{
status: 1,
pro_name: '提交申请'
},
{
status: 1,
pro_name: '审核不通过呢'
},
{
status: 1,
pro_name: '卖家不同意,无须退回'
},
{
status: 1,
pro_name: '退款失败'
},
{
status: 1,
pro_name: '请重新提交申诉'
},
{
status: 1,
pro_name: '申诉中'
},
{
status: 1,
pro_name: '申诉失败'
},
{
status: 0,
pro_name: '申请客服介入'
},
],
sel_icon: "/img/wuliu_icon2.png",
pro_color: '#682074'
},
{
stepInfo: [{
status: 1,
pro_name: '提交申请'
},
{
status: 1,
pro_name: '审核不通过呢'
},
{
status: 1,
pro_name: '卖家不同意,无须退回'
},
{
status: 1,
pro_name: '退款失败'
},
{
status: 1,
pro_name: '请重新提交申诉'
},
{
status: 1,
pro_name: '申诉中'
},
{
status: 1,
pro_name: '申诉失败'
},
{
status: 1,
pro_name: '申请客服介入'
},
{
status: 1,
pro_name: '退款成功'
},
],
sel_icon: "/img/wuliu_icon2.png",
pro_color: '#682074'
}
],
},
onShow() {
let {
list
} = this.data;
list.forEach(item => {
let onePer = item.stepInfo.filter(i0 => i0.status == 1).length;
item.per =100/(item.stepInfo.length-1)*(onePer-1)
})
this.setData({
list
})
}
})