急~请教大佬一个前端拐弯换行进度条的问题！
0
所有回答(8)
0
多搞几张图撒，这是最简便的做法 qvq 每个进度对应一张图
但是这个数量不是固定的，而且不知道怎么渲染这种‘蛇形’
@翻天覆地老九哥: v-for
0
做这个不是很简单，当执行道那个点就显示，没执行到就不显示进度条，那个原图位置是固定的
0
假设你的所有状态是:[1,2,3,4,5,6,7,8,9].
如果一排假设是3个,
那就用3分割数组 var arr =[[1,2,3],[4,5,6],[7,8,9]].
然后渲染这个二维数组, 一维的小标如果是奇数就正常渲染, 如果是偶数就reserve后在渲染.
然后样式上注意一下方向的处理.
伪代码就是这样:
for(var arrIndex in arr){
var items=arr[arrIndex ];
if(arrIndex%2==0) items=items.reverse();
for(var index2 in items){
//<span>items[index2 ]</span>
}
}
//output
//123
//654
//789
不行吧？ 这样渲染只会反转数据，但是dom还是顺序不变
@翻天覆地老九哥:
和dom顺序没有关系, 你需要的数据如何处理, 显示块如何堆叠, 块的方向的样式如何编写.
所以:
在每一个进度条块的堆叠好了之后,
//output
//123
//654
//789
在根据奇偶判断一下样式, 左右的显示样式, 和右左的显示样式.
0
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<style>
.row{
width: 300px;
height: 100px;
font-size:0;
}
.row:nth-of-type(2n+1){
border-right: 1px solid green;
}
.row:nth-of-type(2n){
border-left: 1px solid green;
}
.row:nth-last-of-type(1){
height:0
}
.col{
display: inline-block;
width: 100px;
height: 100%;
border-top: 1px solid green;
box-sizing: border-box;
}
</style>
0
<template>
<div class="snake" style="margin: 0.73vw auto;width: 20vw;">
<div v-for="(item, index) in dataList" :key="index" :class="Math.floor(index/5)%2 == 0 ?(index+1)%5 == 0 ? 'carcle carcle4' : 'carcle carcle2':(index+1)%5 == 0 ? 'carcle carcle3' : 'carcle carcle1'">
{{ item }}
</div>
</div>
</template>
<!--Math.floor(index/5)%2 ==0?'偶数':'' 这里的5可以被修改为你想要的每行个数，同时宽度20vw也需要改变-->
<script>
export default {
name: "snake",
data() {
return {
dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]
}
}
}
</script>
<style scoped>
.carcle{
position: relative;
width: 2vw;
height: 2vw;
border-radius: 50%;
background: blue;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2vw;
}
.carcle1{
float: right;
}
.carcle1::before{
position: absolute;
content: '';
width: 40px;
height: 20px;
right: 35px;
background: blue;
}
.carcle2{
float: left;
}
.carcle2::after{
position: absolute;
content: '';
width: 40px;
height: 20px;
left: 35px;
background: blue;
}
.carcle3{
float: right;
margin-bottom: 2vw;
}
.carcle3::after{
position: absolute;
content: '';
width: 20px;
height: 40px;
top: 35px;
background: blue;
}
.carcle4{
float: left;
margin-bottom: 2vw;
}
.carcle4::before{
position: absolute;
content: '';
width: 20px;
height: 40px;
top: 35px;
background: blue;
}
</style>
0
<style>
.line-box {
position: relative;
width: 1500px;
}
.line-cell {
position: absolute;
right: 0;
top: 20px;
height: 32px;
width: 20px;
background-color: #87ba65;
}
.fl-rt {
float: right;
}
.lf-0 {
left: 0;
}
.line-item {
width: 300px;
float: left;
margin-bottom: 30px;
background-color: #87ba65;
}
</style>
<div class="line-box">
<div class="line-item">1</div>
<div class="line-item">2</div>
<div class="line-item">3</div>
<div class="line-item">4</div>
<div class="line-item">5</div>
<div class="line-cell"></div>
<div class="line-item fl-rt">6</div>
<div class="line-item fl-rt">7</div>
<div class="line-item fl-rt">8</div>
<div class="line-item fl-rt">9</div>
<div class="line-item fl-rt">10</div>
<div class="line-cell lf-0" style="top:72px;"></div>
<div class="line-item">11</div>
</div>
0
可以用canvas画
