当前位置：网站首页>微信小程序实现动态横向步骤条的两种方式
微信小程序实现动态横向步骤条的两种方式
2022-07-28 00:36:00 【苏苏就是小苏苏】
1.实现效果
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"/>
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
})
}
})
4.更多小程序相关，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！
边栏推荐
- Software testing interview question: what types of software testing are you familiar with?
- Favorite songs
- GBase 8c 服务器信号函数
- 软件测试面试题：为什要在一个团队中开展测试工作?
- In the era of great changes in material enterprises, SRM supplier procurement system helps enterprises build a digital benchmark for property procurement
- 简单为美-编程思路
- Linux Installation mysql8.0.29 detailed tutorial
- Gbase 8C backup control function (I)
- Game 302 of leetcode
- GBase 8c 事务ID和快照（一）
猜你喜欢
synchronized详解
忘记root密码
Forget the root password
Establishment of elk log analysis system
Redis design specification
Unity universal red dot system
54：第五章：开发admin管理服务：7：人脸入库流程；人脸登录流程；浏览器开启视频调试模式（以便能够在本机的不安全域名的情况下，也能去开启摄像头）；
Starfish OS X metabell strategic cooperation, metauniverse business ecosystem further
LeetCode高频题128. 最长连续序列，经常被互联网大厂面试考到
After learning the loop, I came across the problem of writing factorial of N, which caused a series of problems, including some common pitfalls for beginners, and how to simplify the code
随机推荐
简单为美-编程思路
HyperMesh circular array - plug in
Packet capturing wizard netcapture app packet capturing tutorial "complete"
focal loss原理及实现
Fiddler mobile packet capturing agent settings (for Huawei glory 60s)
LeetCode 第 302 场周赛
A Tiger's Tale
软件测试面试题：你认为做好测试用例设计工作的关键是什么?
微信小程序图片根据屏幕比例缩放
Gbase 8C database object size function (I)
执行 Add-Migration 迁移时报 Build failed.
实时数仓：美团的实时数仓建设实践
Gbase 8C server signal function
Unreal ue4.27 switchboard porting engine process
Solution of digital commerce cloud supply chain centralized purchase management system: centralized purchase system management mode, digital control of enterprise materials
day7
GBase 8c 备份控制函数（一）
Digital economy is the core of future economic development
Redis design specification
学习了循环碰到了编写计算n的阶乘的题目，由此引发了一系列问题，包括一些初学者常见的坑，以及如何简化代码