vue js css 刻度尺选取体重身高

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;
                }
            }