css
rem= document.documentElement.clientWidth / 7.5 + "px";
.weightAndHeight {
width: 6.54rem;
box-sizing: border-box;
margin: 0 auto;
background-color: #fff;
border-radius: 12px;
padding: 0.32rem;
.title {
font-size: 0.32rem;
color: #222;
line-height: 0.5rem;
margin-bottom: 0.2rem;
}
.box {
&:first-child {
margin-bottom: 1.5rem;
}
&:last-child {
margin-bottom: 1rem;
}
position: relative;
}
//刻度尺
.rulerContainer {
position: relative;
//红色刻度线
&::after {
content: "";
position: absolute;
// width: 20px;
height: 0.32rem;
border-right: 2px solid #FF4E3E;
top: 0.74rem;
left: calc(50% - 1px);
}
.scaleBox {
overflow-x: scroll;
//去除滚动条
&::-webkit-scrollbar {
display: none;
}
height: 65px;
.ruler {
margin: 0 2.95rem;
display: inline-block;
width: 960px;
//刻度图片见文章上面
background-image: url(../img/testInfo/scale.png);
height: 16px;
background-repeat: repeat;
background-size: contain;
ul {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
top: -25px;
left: -5px;
li {
list-style: none;
font-size: 12px;
color: #999;
width: 60px;
}
}
}
}
//左右阴影部分
.shadowLeft {
position: absolute;
left: 0;
width: 0.6rem;
height: 1.1rem;
background-size: cover;
background-image: url(../img/testInfo/left.png);
}
.shadowRight {
position: absolute;
right: 0;
width: 0.6rem;
height: 1.1rem;
background-size: cover;
background-image: url(../img/testInfo/right.png);
}
}
//刻度值显示
.data {
margin-top: 0.2rem;
position: absolute;
width: 100%;
text-align: center;
font-size: 0.48rem;
color: #1f1f1f;
font-weight: bold;
span {
font-size: 0.28rem;
color: #1f1f1f;
}
}
.rulerContainer2 {
@extend .rulerContainer;
.scaleBox {
.ruler {
width: 1320px;
}
}
}
}**
html
**
<div class="weightAndHeight">
<div class="box">
<div class="title">体重</div>
<div class="rulerContainer">
<div class="shadowLeft"></div>
<div class="shadowRight"></div>
<div class="scaleBox weightScaleBox" @scroll="handleScroll('weight')" @touchEnd="handleScrollEnd('weight')">
<div class="ruler">
<ul>
<li>0</li>
<li>10</li>
<li>20</li>
<li>30</li>
<li>40</li>
<li>50</li>
<li>60</li>
<li>70</li>
<li>80</li>
<li>90</li>
<li>100</li>
<li>110</li>
<li>120</li>
<li>130</li>
<li>140</li>
<li>150</li>
</ul>
</div>
</div>
</div>
<div class="data">{{form.weight}}<span>kg</span></div>
</div>
<div class="box">
<div class="title">身高</div>
<div class="rulerContainer2">
<div class="shadowLeft"></div>
<div class="shadowRight"></div>
<div class="scaleBox heightScaleBox" @scroll="handleScroll" @touchEnd="handleScrollEnd">
<div class="ruler">
<ul>
<li>30</li>
<li>40</li>
<li>50</li>
<li>60</li>
<li>70</li>
<li>80</li>
<li>90</li>
<li>100</li>
<li>110</li>
<li>120</li>
<li>130</li>
<li>140</li>
<li>150</li>
<li>160</li>
<li>170</li>
<li>180</li>
<li>190</li>
<li>200</li>
<li>210</li>
<li>220</li>
<li>230</li>
<li>240</li>
</ul>
</div>
</div>
</div>
<div class="data">{{form.height}}<span>cm</span></div>
</div>
</div>**
js
**
data() {
return {
type: 1,
form: {
weight: 65,
height: 175
},
nearWeightNumber: "",
nearHeightNumber: "",
};
}页面初始化的时候
this.nearWeightNumber = this.form.weight * 6;
this.nearHeightNumber = (this.form.height - 30) * 6;//我身高最小值是30所以-30
document.getElementsByClassName("weightScaleBox")[0].scrollLeft = this.nearWeightNumber;
document.getElementsByClassName("heightScaleBox")[0].scrollLeft = this.nearHeightNumber;滚动条滚动的时候调用
handleScroll(type) {
if (type == "weight") {
let scrollLeft = document.getElementsByClassName("weightScaleBox")[0].scrollLeft;
let number = (scrollLeft / 60).toFixed(1);//我单个刻度条的宽度是60
this.nearWeightNumber = number * 60//就近的刻度线的像素
this.form.weight = number * 10;
} else {
let scrollLeft = document.getElementsByClassName("heightScaleBox")[0].scrollLeft;
let number = (scrollLeft / 60).toFixed(1);
this.nearHeightNumber = number * 60
this.form.height = number * 10 + 30;
}
},
//滚动结束时 需要滚动到就近的刻度线的像素 也就是滚动时候存下来的变量
handleScrollEnd(type) {
if (type == "weight") {
document.getElementsByClassName("weightScaleBox")[0].scrollLeft = this.nearWeightNumber;
} else {
document.getElementsByClassName("heightScaleBox")[0].scrollLeft = this.nearHeightNumber;
}
}