html部分
<div class="container">
<!-- 金刚区,两行-->
<div class="king-area" @scroll="scroll}">
<!-- rowMap:{first:[],second:[] -->
<div class="row" v-for="(items, key) in rowMap" :key="key">
<!-- 上下结构的icon和文字-->
<div class="icon"
v-for="(item, index) in items" :key="index">
<!-- img如果有icon,用icon更佳 -->
<img class="img" :src="item.icon" alt="" srcset="" />
<div class="text">{{ item.text}}</div>
</div>
</div>
</div>
<!-- 滚动条|进度条部分,这里直接套用vant-progress的效果 -->
<div class="van-progress progress">
<span class="van-progress__portion portion" :style="progressStyle"></span>
</div>
</div>
两行,可能会前后对齐有些问题,看了下淘宝是每列2个icon, 根据总数分成n列
len
: icon的个数;list
:icon对应的列表;奇数时,考虑最后一个没有的处理,这里不说明了
<div class="container">
<div class="king-area" @scroll="scroll">
<div v-for="i in Math.ceil(len/2)" :key="i" class="col">
<!-- rowIndex:[2,1] -->
<div class="icon"
v-for="j in rowIndex" :key="j">
<img class="img" :src="list[2*i - j].icon" alt="" srcset="" />
<div class="text">{{ list[2*i - j].title }}</div>
</div>
</div>
</div>
<div class="van-progress progress">
<span class="van-progress__portion portion" :style="progressStyle"></span>
</div>
</div>
金刚区样式部分这里就不具体介绍了,滚动条部分可以如下:
.progress {
top: 0.1rem;
width:50px;
left: 40%;
.portion {
background: rgb(242, 130, 106); width: 25px;
}
}
下面直接写金刚区滚动事件改变滚动条(进度条)的样式
用left
,也可以用transform: translate(?);
export default {
name:'XXX',
data() {
return {
progressStyle:''
}
methods: {
scroll(e) {
let {scrollWidth, clientWidth, scrollLeft} = e.target
var maxScrollLeft = scrollWidth - clientWidth //最大scrollLeft值
let ratio = maxScrollLeft/50
//用left,也可以用transform: translate(10px);
this.progressStyle = `left: ${scrollLeft/ratio}%;`
}
}
}
网友评论