前言
分享一下最近在项目遇到一个刻度滑动选择身高体重效果,开干!我玩的就是真实✌✌
先看看效果
页面布局
写之前我们要考虑刻度滑动效果是多次用到还是一次,个人觉得不管多次还是一次用组件化思想更 利于代码的维护和复用,本实例以uniapp为例
- 创建组件scroll-choose.vue
- 这里我们用到scroll-view 可滚动视图区域。用于区域滚动。更多请前往uniapp官网了解>
<template>
<view class="scroll-choose-all" :style="{background:bg}">
<view class="middleLine"></view>
<scroll-view class="scroll-choose" scroll-x="true" upper-threshold="5" lower-threshold="5"
:scroll-left="scrollLeftInit" show-scrollbar="false" @scroll="scroll" @scrolltoupper="upper"
@scrolltolower="lower" scroll-with-animation="true">
<view class="scroll-con" :style="{width: scrollWid}">
<view class="topLine">
<view class="allLine" :style="{'marginRight': maginL + 'px'}" :class="item.type" v-for="(item,index) in scrollList" :key="index"></view>
</view>
<view class="bottomNum" :style="{'paddingLeft': allNumLeft}">
<text class="allNum" :style="{width: (maginL + 2) * 10 + 'px',left: -((maginL + 2) * 5) + 'px',color:gearcolor}" v-for="(item,index) in scrollNumList" :key="index">
{{item}}
</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: 'ScaleSlidin',
props: {
//起始值和终止值差距不要过大，否则会影响页面性能
/**
* 初始值（注意：初始值应在起始值和终止值之间）
*/
scrollLeft: {
type: Number,
default: 0
},
/**
* 滚动区域起始值（注意：起始值不能大于终止值）
*/
scrollStart: {
type: Number,
default: 0
},
/**
* 滚动区域终止值
*/
scrollEnd: {
type: Number,
default: 100
},
/**
* 线间距
*/
maginL: {
type: Number,
default: 5
},
/**
* 背景区域
*/
bg: {
type: String,
default: '#393939'
},
/**
* 卡尺数字颜色
*/
gearcolor:{
type: String,
default: '#FFFFFF'
},
/**
* 卡尺刻度整数颜色
*/
gearscale:{
type: Boolean,
default: true
}
},
data() {
return {
scrollList:[],
scrollNumList:[],
scrollWid: '100vw',
scrollLeftInit: 0, //设置横向滚动条位置
allNumLeft: ''
}
},
mounted() {
this.init();
},
computed:{
},
methods: {
}
</script>
<style lang="scss">
@charset "UTF-8";
.scroll-choose-all{
width: 750rpx;
height: 220rpx;
margin: 10px 0;
// border-bottom: 1px solid #ccc;
// border-top: 1px solid #ccc;
position: relative;
}
.middleLine{
position: absolute;
width: 4rpx;
height: 95rpx;
background: #FF6565;
left: 375rpx;
margin-left: -2px;
z-index: 1;
}
.scroll-choose{
width: 750rpx;
height: 200rpx;
.scroll-con{
height: 200rpx;
overflow: hidden;
.topLine{
height: 30px;
padding: 0 372rpx;
}
.bottomNum{
margin-top: 60rpx;
height: 30px;
padding: 0 0 0 372rpx;
width: 100%;
// display: flex;
// flex-wrap: nowrap;
.allNum{
display: inline-block;
position: relative;
// width: 70px;
// left: -35px;
text-align: center;
font-size: 44rpx;
font-weight: 800;
}
}
.allLine{
display: inline-block;
// margin-right: 5px;
width: 4rpx;
background: #999999;
height: 68rpx;
position: relative;
}
.allLine:last-child{
margin-right: 0px !important;
}
.LLine{
height: 94rpx;
background: #ffffff;
}
.hLine {
height: 94rpx;
background: #2A2A2A;;
}
.MLine{
height: 68rpx;
top: -15px;
background: #999999;
}
.SLine{
height: 68rpx;
top: -15px;
}
}
}
</style>
3.使用组件,创建real.vue
<template>
<view class="body">
<scroll-choose
@scroll="newscroll"
:scrollStart="scrollStarts"
:scrollEnd="scrollEnds"
:scrollLeft="scrollLefts"
:maginL="maginLs"
:bg="bg"
:gearscale="gearscale"
:gearcolor="gearcolor"
>
</scroll-choose>
</view>
</template>
<script>
export default {
data() {
return {
gearscale:false,
gearcolor:'#2A2A2A',
bg:"ffffff",
scrollLeft: 162,//初始值
scrollStart: 50,//滚动区域起始值
scrollEnd: 230,//滚动区域终止值
maginL: 5,//线间距
scrollLeftNows: 62,//页面显示
scrollLefts: 82,//初始值
scrollStarts: 50,//滚动区域起始值
scrollEnds: 230,//滚动区域终止值
maginLs: 5,//线间距
}，
methods:{
scroll(val){
this.scrollLeft = val;
},
}
}
</script>
看看效果吧!这里忽略当前身高样式 scrollLeft数值请自行展示
刻度滑动数值变化(完整代码)
<template>
<view class="scroll-choose-all" :style="{background:bg}">
<view class="middleLine"></view>
<scroll-view class="scroll-choose" scroll-x="true" upper-threshold="5" lower-threshold="5"
:scroll-left="scrollLeftInit" show-scrollbar="false" @scroll="scroll" @scrolltoupper="upper"
@scrolltolower="lower" scroll-with-animation="true">
<view class="scroll-con" :style="{width: scrollWid}">
<view class="topLine">
<view class="allLine" :style="{'marginRight': maginL + 'px'}" :class="item.type" v-for="(item,index) in scrollList" :key="index"></view>
</view>
<view class="bottomNum" :style="{'paddingLeft': allNumLeft}">
<text class="allNum" :style="{width: (maginL + 2) * 10 + 'px',left: -((maginL + 2) * 5) + 'px',color:gearcolor}" v-for="(item,index) in scrollNumList" :key="index">
{{item}}
</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: 'ScrollChoose',
props: {
//起始值和终止值差距不要过大，否则会影响页面性能
/**
* 初始值（注意：初始值应在起始值和终止值之间）
*/
scrollLeft: {
type: Number,
default: 0
},
/**
* 滚动区域起始值（注意：起始值不能大于终止值）
*/
scrollStart: {
type: Number,
default: 0
},
/**
* 滚动区域终止值
*/
scrollEnd: {
type: Number,
default: 100
},
/**
* 线间距
*/
maginL: {
type: Number,
default: 5
},
/**
* 背景区域
*/
bg: {
type: String,
default: '#393939'
},
/**
* 卡尺数字颜色
*/
gearcolor:{
type: String,
default: '#FFFFFF'
},
/**
* 卡尺刻度整数颜色
*/
gearscale:{
type: Boolean,
default: true
}
},
data() {
return {
scrollList:[],
scrollNumList:[],
scrollWid: '100vw',
scrollLeftInit: 0,
allNumLeft: ''
}
},
mounted() {
this.init();
},
computed:{
},
methods: {
init(){
for(let i = this.scrollStart; i < (this.scrollEnd + 1); i++){
let _line = {};
if(i%5 == 0){
if(i%10 == 0){
this.scrollNumList.push(i);
_line.type = this.gearscale ? 'LLine' : 'hLine'
}else{
_line.type = 'MLine'
}
}else{
_line.type = 'SLine'
}
this.scrollList.push(_line);
}
this.scrollWid = uni.upx2px(750) + (this.scrollEnd - this.scrollStart) * (this.maginL + 2) + 'px';
if(this.scrollStart % 10 != 0){
if(this.scrollStart > 0){
this.allNumLeft = (10 - this.scrollStart % 10) * (this.maginL + 2) + uni.upx2px(372) + 'px';
}else{
this.allNumLeft = Math.abs(this.scrollStart % 10) * (this.maginL + 2) + uni.upx2px(372) + 'px';
}
}
setTimeout(()=>{
this.setNowLeft();
},100)
},
setNowLeft(){
this.scrollLeftInit = (this.scrollLeft - this.scrollStart) * (this.maginL + 2);
},
upper: function(e) {
setTimeout(()=>{
this.$emit('scroll',this.scrollStart);
},50)
},
lower: function(e) {
setTimeout(()=>{
this.$emit('scroll',this.scrollEnd);
},50)
},
scroll: function(e) {
this.$emit('scroll',Math.round(e.detail.scrollLeft/(this.maginL + 2)) + this.scrollStart);
}
}
}
</script>
<style lang="scss">
@charset "UTF-8";
.scroll-choose-all{
width: 750rpx;
height: 220rpx;
margin: 10px 0;
// border-bottom: 1px solid #ccc;
// border-top: 1px solid #ccc;
position: relative;
}
.middleLine{
position: absolute;
width: 4rpx;
height: 95rpx;
background: #FF6565;
left: 375rpx;
margin-left: -2px;
z-index: 1;
}
.scroll-choose{
width: 750rpx;
height: 200rpx;
.scroll-con{
height: 200rpx;
overflow: hidden;
.topLine{
height: 30px;
padding: 0 372rpx;
}
.bottomNum{
margin-top: 60rpx;
height: 30px;
padding: 0 0 0 372rpx;
width: 100%;
// display: flex;
// flex-wrap: nowrap;
.allNum{
display: inline-block;
position: relative;
// width: 70px;
// left: -35px;
text-align: center;
font-size: 44rpx;
font-weight: 800;
}
}
.allLine{
display: inline-block;
// margin-right: 5px;
width: 4rpx;
background: #999999;
height: 68rpx;
position: relative;
}
.allLine:last-child{
margin-right: 0px !important;
}
.LLine{
height: 94rpx;
background: #ffffff;
}
.hLine {
height: 94rpx;
background: #2A2A2A;;
}
.MLine{
height: 68rpx;
top: -15px;
background: #999999;
}
.SLine{
height: 68rpx;
top: -15px;
}
}
}
</style>
最后看看效果吧!🎉🎉,录视频有点卡
结束语
感谢阅读^_^ 不足地方请大家指点指点😊😊😊
