微信小程序实现动态横向步骤条的两种方式
2022-07-25 本文已影响0人
苏苏哇哈哈
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：
<progress percent="20" show-info stroke-width="3"/>
image.png
3.实现代码
//方法一：
<view class="con" wx:for="{{list}}" wx:key="list" wx:for-item="itemP" wx:for-index="indexP">
<view class="head">
<block wx:for="{{itemP.stepInfo}}" wx:key='list' wx:for-item="item" wx:for-index="index">
<view class="head_info">
<image class="head_icon" src="{{item.status==1?itemP.sel_icon:'../img/circle03.png'}}"></image>
<view class="head_title">{{item.pro_name}}</view>
<view wx:if="{{index!=0}}" class='head_line' style="width:{{600/(itemP.stepInfo.length-1)}}rpx;background:{{item.status==1?itemP.pro_color:''}};"></view>
</view>
</block>
</view>
</view>
//方法二：
<view class="con" wx:for="{{list}}" wx:key="list" wx:for-item="itemP" wx:for-index="indexP">
<view class="head">
<progress percent="{{itemP.per}}" stroke-width="2" color="{{itemP.pro_color}}" />
<block wx:for="{{itemP.stepInfo}}" wx:key='list' wx:for-item="item" wx:for-index="index">
<view class="head_info">
<image class="head_icon" src="{{item.status==1?itemP.sel_icon:'../img/circle03.png'}}"></image>
<view class="head_title">{{item.pro_name}}</view>
</view>
</block>
</view>
</view>
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
})
}
})
