无缝滚动表格、数字定时滚动组件封装
作者：互联网
//tableRun.vue
<template>
<div id="table_scroll">
<div class="table_header">
<div
class="head_td"
v-for="(item, index) in headLists"
:key="index"
:style="own_width(item.width)"
>
{{ item.name }}
</div>
</div>
<div class="table_main">
<div
class="table_box"
@mouseenter.stop="mouseover"
@mouseleave.stop="mouseout"
>
<div class="table_row" v-for="(item, index) in listTrue" :key="index">
<div
class="table_td"
v-for="(item_td, index) in headLists"
:key="index"
:style="own_width(item_td.width)"
>
{{ item[item_td.value] }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "scrollTable",
props: {
hideString: {
type: Array,
default: function () {
return ["zjhm", "lxhm"];
},
},
headLists: {
type: Array,
default: function () {
return [];
},
},
dataLists: {
type: Array,
default: function () {
return [];
},
},
},
data() {
return {
timer: null,
};
},
computed: {
listTrue() {
let lists = this.dataLists;
let hideOne = this.hideString[0];
let hideTwo = this.hideString[1];
lists.map((item) => {
if (item[hideOne] && item[hideTwo]) {
item[hideOne] =
item[hideOne].substring(0, 4) +
"**********" +
item[hideOne].substring(
item[hideOne].length - 4,
item[hideOne].length
);
item[hideTwo] =
item[hideTwo].substring(0, 3) +
"****" +
item[hideTwo].substring(
item[hideTwo].length - 4,
item[hideTwo].length
);
return item;
}
});
if (this.dataLists.length <= 14) return this.dataLists;
lists.push({});
return lists.concat(lists);
},
own_width() {
return function (param) {
if(!param){
return {}
}
return {
width: param,
flex: "none!important",
}
}
},
},
mounted() {
if (this.dataLists.length <= 14) return;
this.go();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
goscroll() {
let table_main = document.getElementsByClassName("table_main")[0];
let table_box = document.getElementsByClassName("table_box")[0];
if (table_main.scrollTop >= table_box.scrollHeight / 2) {
table_main.scrollTop = 0;
} else {
table_main.scrollTop++;
}
},
go() {
if (this.timer) {
clearInterval(this.timer);
}
this.timer = setInterval(this.goscroll, 10);
},
mouseover() {
clearInterval(this.timer);
console.log("over");
},
mouseout() {
this.go();
console.log("out");
},
},
};
</script>
<style lang="less" scoped>
#table_scroll {
.table_header {
width: 1751px;
height: 61px;
background-color: #244479;
color: #fff;
display: flex;
.head_td {
font-size: 18px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
}
.table_main {
width: 1751px;
height: 826px;
background-color: black;
overflow: scroll;
.table_box {
width: 1751px;
background-color: gray;
.table_row {
width: 1751px;
height: 59px;
display: flex;
.table_td {
font-size: 18px;
color: #fff;
flex: 1;
}
}
}
}
}
// 隐藏滚轮
::-webkit-scrollbar {
display: none;
}
// table row style
.table_box .table_row:nth-child(even) {
// background-color: #244479;
background-color: rgba(36, 68, 121, 0.4);
}
.table_box .table_row:nth-child(odd) {
// background-color: #244479;
background-color: rgba(36, 68, 121, 0.2);
}
// table td center
.table_td {
display: flex;
justify-content: center;
align-items: center;
}
.own_width {
width: 200px;
flex: none !important;
}
</style>
//numRun.vue
<template>
<div id="run_num">
<div class="run_left" :style="leftBck">
<div class="four_before">
<div
class="num_scroll"
v-for="(item, index) in clocks_left"
:key="index"
>
<span v-if="!isNaN(item)">
<i ref="numRef_left"
><span
v-for="(iItem_before, iIndex_before) in iArray_before"
:key="iIndex_before"
>{{ iItem_before }}</span
></i
>
</span>
<span v-else>{{ item }}</span>
</div>
</div>
<div class="star_icon">
<span class="star_span" v-for="(item, index) in starList" :key="index"
>*</span
>
</div>
<div class="four_after">
<div
class="num_scroll"
v-for="(item, index) in clocks_right"
:key="index"
>
<span v-if="!isNaN(item)">
<i ref="numRef_right"
><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
iItem
}}</span></i
>
</span>
<span v-else>{{ item }}</span>
</div>
</div>
</div>
<div class="run_right" :style="rightBck" v-if="num_type === 'address'">
<div
class="num_scroll"
v-for="(item, index) in clocks_house"
:key="index"
>
<span v-if="!isNaN(item)">
<i ref="numRef"
><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
iItem
}}</span></i
>
</span>
<span v-else>{{ item }}</span>
</div>
</div>
<div
class="run_right_other"
:style="rightBckXh"
v-if="num_type === 'index'"
>
<div class="run_right_index"><span>序</span><span>号</span></div>
<div
class="num_scroll"
v-for="(item, index) in clocks_index"
:key="index"
>
<span v-if="!isNaN(item)">
<i ref="numRef"
><span v-for="(iItem, iIndex) in iArray" :key="iIndex">{{
iItem
}}</span></i
>
</span>
<span v-else>{{ item }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
watch: {
num_scroll: {
handler: function (val) {
console.log(val);
this.setNumberTransform_house(val.param);
this.setNumberTransform(val.sfz_start, val.sfz_end);
},
deep: true,
},
},
props: {
num_type: {
type: String,
default: "address",
// default: "index"
},
num_scroll: {
type: Object,
default: function () {
return { sfz_start: "1111", sfz_end: "1111", param: "000000" };
},
},
},
data() {
return {
leftBck: {
backgroundImage: "url(" + require("../assets/sfz.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%,cover",
},
rightBck: {
backgroundImage: "url(" + require("../assets/fh.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%,cover",
},
rightBckXh: {
backgroundImage: "url(" + require("../assets/xh.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%,cover",
},
clocks_left: [0, 0, 0, 0],
clocks_right: [0, 0, 0, 0],
clocks_house: [0, "-", 0, "-", 0, "-", 0, 0, 0],
clocks_index: [0, 0, 0, 0],
starList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
iArray: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
iArray_before: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
};
},
mounted() {
setInterval(() => {
// let count = this.getRandomNumber(0, 9999);
// this.setNumberTransform(count);
// let count_house = this.getRandomNumber(0, 999999);
// this.setNumberTransform_house(count_house);
}, 1000);
},
methods: {
setNumberTransform(count1, count2) {
// 空位补齐
let newNumber1 = this.PrefixZero(count1, 4);
let newNumber2 = this.PrefixZero(count2, 4);
let items_left = this.$refs.numRef_left;
let items_right = this.$refs.numRef_right;
for (let i = 0; i < items_left.length; i++) {
let el_left = items_left[i];
// 兼容浏览器
el_left.style.transform = `translate(-50%, -${newNumber1[i] * 10}%)`;
el_left.style.transform = `-ms-translate(-50%, -${
newNumber1[i] * 10
}%)`;
el_left.style.transform = `-moz-translate(-50%, -${
newNumber1[i] * 10
}%)`;
el_left.style.transform = `-o-translate(-50%, -${newNumber1[i] * 10}%)`;
}
for (let i = 0; i < items_right.length; i++) {
let el_right = items_right[i];
// 兼容浏览器
el_right.style.transform = `translate(-50%, -${newNumber2[i] * 10}%)`;
el_right.style.transform = `-ms-translate(-50%, -${
newNumber2[i] * 10
}%)`;
el_right.style.transform = `-moz-translate(-50%, -${
newNumber2[i] * 10
}%)`;
el_right.style.transform = `-o-translate(-50%, -${
newNumber2[i] * 10
}%)`;
}
},
setNumberTransform_house(count) {
//区分type
if (this.num_type === "index") {
// 空位补齐
let newNumber = this.PrefixZero(count, 3);
let items = this.$refs.numRef;
console.log(items);
for (let i = 0; i < items.length; i++) {
let el = items[i];
// 兼容浏览器
el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`;
el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`;
el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`;
el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`;
}
} else if (this.num_type === "address") {
// 空位补齐
let newNumber = this.PrefixZero(count, 6);
let items = this.$refs.numRef;
console.log(items);
for (let i = 0; i < items.length; i++) {
let el = items[i];
// 兼容浏览器
el.style.transform = `translate(-50%, -${newNumber[i] * 10}%)`;
el.style.transform = `-ms-translate(-50%, -${newNumber[i] * 10}%)`;
el.style.transform = `-moz-translate(-50%, -${newNumber[i] * 10}%)`;
el.style.transform = `-o-translate(-50%, -${newNumber[i] * 10}%)`;
// debugger
}
}
},
// 获取随机数
getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
},
// num: 被操作数 , n 固定的总位数
PrefixZero(num, n) {
return (Array(n).join(0) + num).slice(-n);
},
},
};
</script>
<style lang="less" scoped>
#run_num {
font-family: Avenir, Helvetica, Arial, sans-serif;
width: 1826px;
height: 200px;
display: flex;
justify-content: space-between;
.run_left {
width: 1300px;
height: 120px;
display: flex;
.four_before {
width: 301px;
display: flex;
box-sizing: border-box;
padding-left: 20px;
.num_scroll {
flex: 1;
color: #fff;
font-size: 80px;
span {
position: relative;
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
// writing-mode: vertical-rl;
// text-orientation: upright;
i {
width: 100%;
position: absolute;
// top: 50%;
top: 0;
// margin-top: -44px;
left: 50%;
// letter-spacing: 10px;
transition: transform 0.5s ease-in-out;
transform: translate(-50%, 0);
span {
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: #44ffff;
}
}
}
}
}
.star_icon {
flex: 1;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 80px;
color: #fff;
.star_span {
margin-top: 39px;
color: #44ffff;
}
}
.four_after {
width: 301px;
display: flex;
box-sizing: border-box;
padding-right: 22px;
.num_scroll {
flex: 1;
color: #fff;
font-size: 80px;
span {
position: relative;
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
// writing-mode: vertical-rl;
// text-orientation: upright;
i {
width: 100%;
position: absolute;
// top: 50%;
top: 0;
// margin-top: -44px;
left: 50%;
// letter-spacing: 10px;
transition: transform 0.5s ease-in-out;
transform: translate(-50%, 0);
span {
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: #44ffff;
}
}
}
}
}
}
.run_right {
width: 500px;
height: 120px;
display: flex;
box-sizing: border-box;
padding: 0 29px 0 20px;
.num_scroll {
flex: 1;
color: #fff;
font-size: 80px;
span {
display: flex !important;
justify-content: center;
align-items: center;
position: relative;
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
color: #44ffff;
// writing-mode: vertical-rl;
// text-orientation: upright;
i {
width: 100%;
position: absolute;
// top: 50%;
top: 0;
// margin-top: -44px;
left: 50%;
// letter-spacing: 10px;
transition: transform 0.5s ease-in-out;
transform: translate(-50%, 0);
span {
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: #44ffff;
}
}
}
}
}
.run_right_other {
width: 500px;
height: 120px;
display: flex;
box-sizing: border-box;
padding-right: 25px;
.run_right_index {
width: 200px;
font-size: 56px;
color: #0584d9;
display: flex;
align-items: center;
padding-left: 20px;
box-sizing: border-box;
span {
flex: 1;
}
}
.num_scroll {
flex: 1;
color: #fff;
font-size: 80px;
span {
display: flex !important;
justify-content: center;
align-items: center;
position: relative;
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
// writing-mode: vertical-rl;
// text-orientation: upright;
i {
width: 100%;
position: absolute;
// top: 50%;
top: 0;
// margin-top: -44px;
left: 50%;
// letter-spacing: 10px;
transition: transform 0.5s ease-in-out;
transform: translate(-50%, 0);
span {
height: 120px;
display: flex;
justify-content: center;
align-items: center;
color: #44ffff;
}
}
}
}
}
}
</style>
//引用组件
<template>
<div id="app">
<HelloWorld class="hello_com" :headLists="headLists" :dataLists="dataLists"/>
<HelloRunNum :num_scroll="numScroll" num_type="index"/>
<!-- <FuckWin10/>
<FuckWin11/> -->
</div>
</template>
<script>
import HelloWorld from './components/tableRun.vue'
import helloRunNum from './components/numRun.vue'
// import fuckWin10 from './components/fuckWin10.vue'
// import fuckWin11 from './components/fuckWin11.vue'
export default {
name: 'App',
components: {
HelloWorld,
HelloRunNum:helloRunNum,
// FuckWin10:fuckWin10,
// FuckWin11:fuckWin11
},
data(){
return {
numScroll:{},
headLists:[],
dataLists:[]
}
},
mounted(){
let timer = setTimeout(() => {
this.numScroll={sfz_start:"1234",sfz_end:"5678",param:"7890"}
this.headLists = [{ name: "序号", value: "value",width:"100px" },
{ name: "分组", value: "fz" },
{ name: "申请人姓名", value: "sqrxm" },
{ name: "证件号码", value: "zjhm" },
{ name: "联系号码", value: "lxhm" },
{ name: "家庭人数", value: "jtrs" },
{ name: "申请人类型", value: "sqrlx", width: "300px" },
{ name: "小区名称", value: "xqmc" },
{ name: "摇号结果", value: "yhjg" },
{ name: "户型", value: "hx" }]
this.dataLists = [{
value: 1,
id: "a",
fz: "第一组",
sqrxm: "于欢水",
zjhm: "429004199511273119",
lxhm: "13333333333",
jtrs: "2",
sqrlx: "城镇低收入住房困难家庭",
// sqrlx: "城镇低收入住房",
xqmc: "幸福花园",
yhjg: "1-3-2-302",
hx: "两室一厅",
},
{ value: 2, id: "b" },
{ value: 3, id: "c" },
{ value: 4, id: "d" },
{ value: 5, id: "e" },
{ value: 6, id: "f" },
{ value: 7, id: "g" },
{ value: 8, id: "h" },
{ value: 9, id: "i" },
{ value: 10, id: "j" },
{ value: 11, id: "k" },
{ value: 12, id: "l" },
{ value: 13, id: "m" },
{ value: 14, id: "n" },
{ value: 15, id: "o" }]
}, 1000);
console.log(timer)
}
}
</script>
<style>
#app {
/* font-family: Avenir, Helvetica, Arial, sans-serif; */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.hello_com{
margin-bottom: 80px;
}
</style>
标签：flex,封装,items,50%,transform,value,width,滚动,无缝 来源： https://www.cnblogs.com/chyshy/p/14972602.html