- 創建一個滾動組件
<template>
<div class="qwNumBox" style="width: 36px;height:48px;">
<div class="trasBox" :style="{ top:( -1 * value * 48) +'px' }">
<div class="qwnum">0</div>
<div class="qwnum">1</div>
<div class="qwnum">2</div>
<div class="qwnum">3</div>
<div class="qwnum">4</div>
<div class="qwnum">5</div>
<div class="qwnum">6</div>
<div class="qwnum">7</div>
<div class="qwnum">8</div>
<div class="qwnum">9</div>
</div>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number,
default() {
return 0;
}
}
}
};
</script>
<style lang="scss">
.qwNumBox + .qwNumBox {
margin-left: 5px;
}
.qwNumBox {
position: relative;
display: inline-block;
float: left;
width: 36px;
height: 48px;
overflow: hidden;
.trasBox {
position: absolute;
left: 0;
top: 0;
height: auto;
width: 100%;
transform-origin: 0 0;
transition: top 0.8s;
}
.qwnum {
width: 36px;
height: 48px;
line-height: 48px;
background: rgba(72, 152, 241, 0.072);
border: 1px solid rgba(72, 152, 241, .3);
border-radius: 6px;
font-size: 36px;
font-family: MicrosoftYaHei-Bold;
font-weight: bold;
color: #4898F1;
text-align: center;
}
}
</style>
- 根據數字長度循環出若干個該組件
<template v-for="(num,i) in getNumber(mark)">
<numRun :value="parseInt(num)" :key="i"></numRun>
</template>
- 效果圖