首页 新闻 搜索 专区 学院

急~请教大佬一个前端拐弯换行进度条的问题!

0
悬赏园豆:200 [待解决问题]

请问这种叫什么图?是怎么实现的?如果用VUE渲染的话,怎么实现从左到右,再从右到左,再从左...这样渲染?

翻天覆地老九哥的主页 翻天覆地老九哥 | 初学一级 | 园豆:4
提问于:2020-12-21 12:21
< >
分享
所有回答(7)
0

多搞几张图撒,这是最简便的做法 qvq 每个进度对应一张图

默卿 | 园豆:5239 (大侠五级) | 2020-12-21 14:01

但是这个数量不是固定的,而且不知道怎么渲染这种‘蛇形’

支持(0) 反对(0) 翻天覆地老九哥 | 园豆:4 (初学一级) | 2020-12-21 14:03

@翻天覆地老九哥: v-for

支持(0) 反对(0) 人间春风意 | 园豆:1142 (小虾三级) | 2020-12-23 09:39
0

做这个不是很简单,当执行道那个点就显示,没执行到就不显示进度条,那个原图位置是固定的

浅笑若风 | 园豆:245 (菜鸟二级) | 2020-12-21 14:20
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
czd890 | 园豆:12059 (专家六级) | 2020-12-21 15:04

不行吧? 这样渲染只会反转数据,但是dom还是顺序不变

支持(0) 反对(0) 翻天覆地老九哥 | 园豆:4 (初学一级) | 2020-12-22 15:59

@翻天覆地老九哥:

和dom顺序没有关系, 你需要的数据如何处理, 显示块如何堆叠, 块的方向的样式如何编写.

所以:
在每一个进度条块的堆叠好了之后,
//output
//123
//654
//789
在根据奇偶判断一下样式, 左右的显示样式, 和右左的显示样式.

支持(0) 反对(0) czd890 | 园豆:12059 (专家六级) | 2020-12-23 00:19
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>

Virus、剧终 | 园豆:241 (菜鸟二级) | 2021-01-21 00:29
0
有点小九九 | 园豆:201 (菜鸟二级) | 2021-01-26 16:14
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>

jike-ldm | 园豆:208 (菜鸟二级) | 2021-05-27 15:31
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>

rf8188 | 园豆:204 (菜鸟二级) | 2021-11-05 16:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册