前端实现滑动刻度尺

前端实现滑动刻度尺效果,左右滑动刻度尺,对应的数据会发生改变,效果如下:

实现思路:使用vue2,进行数据绑定,即保证上方的数据实时更新,向右滑动刻度尺数值增加,向左减少。

1.写一个大的div盒子给固定宽度和高度;

2、在外层的div里嵌套一个div,设置超出父级div盒子的宽度,制作一张刻度尺的png图片作为子盒子的背景图,同时给父级设置scroll-y:auto;实现左至右滑动

3,写一个小的div即作为参照物的蓝色指针,通过父相自绝定位至中间、

4,js方法通过监听父级盒子左右滑动的滚动条并将至赋给视图中的数字,即可实现滑动刻度修改数值

具体代码实现如下:

<template>
    <div class="loginTwo">
        <div class="head">
            <van-nav-bar title="完善信息" />
        </div>
        <div class="main">
            <div class="form">
                <p class="title">你的身高</p>
                <div class="box">
                    <div class="text textA">{{ height }}</div>
                    <div class="outBox" ref="h_out" @scroll="handleHeight">
                        <div class="liningBox" ref="h_lin"></div>
                    </div>
                    <!-- 基准线 -->
                    <div class="vertical"></div>
                </div>
                <p class="title">你的体重</p>
                <div class="box2">
                    <div class="text textB"> {{ weight }}</div>
                    <div class="outBox" ref="out" @scroll="handleWeight">
                        <div class="liningBox" ref="lin"></div>
                    </div>
                    <!-- 基准线 -->
                    <div class="vertical2"></div>
                </div>
                <div class="btn">下一步</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            w_scroll: 0,
            h_scroll: 0,
        }
    },
    mounted() {
        this.$refs.out.scrollLeft = 300;
        this.$refs.out.addEventListener('scroll', this.handleScroll, { passive: true });
        this.$refs.h_out.scrollLeft = 300;
        this.$refs.h_out.addEventListener('scroll', this.handleScroll, { passive: true });
    },
    computed: {
        weight() {
            if (this.w_scroll <= 30) {
                return 30
            } else {
                return this.w_scroll
            }
        },
        height() {
            if (this.h_scroll <= 30) {
                return 30
            } else {
                return this.h_scroll
            }
        }
    },
    methods: {
        handleWeight() {
            const scrollLeft = this.$refs.out.scrollLeft;
            const w_distance = this.getFractionalScroll(scrollLeft, 1) * 200;
            this.w_scroll = w_distance.toFixed(1)
        },
        handleHeight() {
            const scrollLeft = this.$refs.h_out.scrollLeft;
            const h_distance = this.getFractionalScroll(scrollLeft) * 300;
            this.h_scroll = Math.round(h_distance)
        },
        getFractionalScroll(scrollLeft, val) {
            if (val == 1) {
                const scrollWidth = this.$refs.out.scrollWidth - this.$refs.out.clientWidth;
                const fractionalScroll = scrollLeft / scrollWidth;
                // return fractionalScroll.toFixed(3); // 设置小数点位数
                return fractionalScroll; // 设置小数点位数
            } else {
                const scrollWidth = this.$refs.h_out.scrollWidth - this.$refs.h_out.clientWidth;
                const fractionalScroll = scrollLeft / scrollWidth;
                return fractionalScroll; // 设置小数点位数
            }

        },
    },
}
</script>
<style lang="scss" scoped>
.head {
    // padding-top: 20px;
    height: 150px;
    width: 100%;
    background-color: #5B74FF;
}

.head::v-deep .van-nav-bar {
    background-color: transparent;
}

::v-deep .van-nav-bar__title {
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
}

::v-deep.van-hairline--bottom::after {
    border-bottom-width: 0,
}

.main {
    height: calc(100vh - 90px);
    background-color: #ffffff;
    position: relative;
}

.form {
    position: absolute;
    border-radius: 0 50px 0 0;
    background-color: #ffffff;
    top: -8%;
    height: 100%;
    width: 100%;
    padding: 32px 18px 0;
}

.title {
    font-size: 18px;
    font-weight: 800;
    color: #2A2A2A;
    margin-bottom: 23px;
}

.outBox {
    height: 35px;
    overflow-x: scroll;
    position: relative;
}


.liningBox {
    width: 800px;
    height: 35px;
    background: url(../../assets/images/ruler.png)repeat-x;
}

.vertical {
    position: absolute;
    display: block;
    width: 2px;
    height: 40px;
    background-color: #5B74FF;
    left: 48%;
    top: 37.2%;

}

.vertical2 {
    position: absolute;
    display: block;
    width: 2px;
    height: 40px;
    background-color: #5B74FF;
    left: 48%;
    top: 37.2%;

}

.outBox::-webkit-scrollbar {
    display: none;
}

.box {
    padding: 32px 36px 90px;
    text-align: center;
    position: relative;
}

.box2 {
    padding: 32px 36px 90px;
    text-align: center;
    position: relative;
}

.text {
    font-size: 29px;
    font-weight: 800;
    color: #5B74FF;
    margin-bottom: 6px;
}

.textA::after {
    content: 'cm';
    font-size: 12px;
    font-weight: lighter;
    color: #5B74FF;
}

.textB::after {
    content: 'kg';
    font-size: 12px;
    font-weight: lighter;
    color: #5B74FF;
}

.btn {
    width: 300px;
    height: 42px;
    line-height: 42px;
    background: #5B74FF;
    border-radius: 21px;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    margin: 0 auto 12px;
}
</style>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Android应用中实现滑动刻度尺效果,可以使用SeekBar控件。SeekBar是一个滑动条控件,可以让用户通过滑动选择数值。我们可以通过自定义SeekBar的样式来实现滑动刻度尺的效果,以便用户可以方便地选择身高和体重。 以下是一个实现滑动刻度尺效果的示例代码: 1. 首先,在layout文件中添加SeekBar控件,例如: ``` <SeekBar android:id="@+id/height_seekbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:max="220" android:progress="170" android:progressDrawable="@drawable/custom_seekbar" android:thumb="@drawable/custom_thumb" /> ``` 在这个示例中,我们创建了一个id为height_seekbar的SeekBar控件,并设置了它的最大值和初始值。我们还指定了SeekBar的样式,包括进度条和拇指图标,这些样式可以通过自定义drawable来实现。 2. 在drawable文件夹中创建custom_seekbar.xml文件,定义SeekBar的进度条样式,例如: ``` <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape android:shape="rectangle"> <corners android:radius="8dp" /> <solid android:color="#EFEFEF" /> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape android:shape="rectangle"> <corners android:radius="8dp" /> <solid android:color="#FF4081" /> </shape> </clip> </item> </layer-list> ``` 在这个示例中,我们创建了一个layer-list来定义SeekBar的进度条样式。进度条由两个矩形组成,一个代表背景,另一个代表进度。我们通过设置shape来定义矩形的圆角和颜色。 3. 在drawable文件夹中创建custom_thumb.xml文件,定义SeekBar的拇指图标样式,例如: ``` <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="30dp" android:height="30dp" /> <solid android:color="#FF4081" /> </shape> ``` 在这个示例中,我们创建了一个圆形的拇指图标,设置了它的大小和颜色。 4. 在Java代码中添加SeekBar的监听器,例如: ``` SeekBar heightSeekBar = findViewById(R.id.height_seekbar); heightSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { // 在这里处理身高值的变化 } @Override public void onStartTrackingTouch(SeekBar seekBar) { // 在这里处理开始滑动SeekBar的事件 } @Override public void onStopTrackingTouch(SeekBar seekBar) { // 在这里处理停止滑动SeekBar的事件 } }); ``` 在这个示例中,我们获取了SeekBar控件的实例,并设置了它的监听器。当用户拖动SeekBar时,会回调onProgressChanged方法,并传递新的进度值。我们可以在这个方法中处理身高值的变化。在onStartTrackingTouch和onStopTrackingTouch方法中,我们可以处理开始和停止滑动SeekBar的事件。 希望这个示例能够对你有帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值