macrocc
/
scrollTable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移除key ，删除滚动的字体

main
wanghongjian 2024-03-06 10:11:09 +08:00
parent 2c386f4cd6
commit f59c179f45
2 changed files with 165 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

332
src/components/Scroll.vue
View File

@ -1,21 +1,29 @@
<template> <template>
<div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc" <div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc" @mousewheel="mousewheelFunc">
@mousewheel="mousewheelFunc"> <div
<div class="list-body" :class="{ class="list-body"
'list-body2': isHorizontal, :class="{
canScroll:!isCanScroll 'list-body2': isHorizontal,
}" ref="listBody" :style="{ transform: getScrollDistance() }"> canScroll: !isCanScroll,
<slot></slot> }"
</div> ref="listBody"
<div class="list-body" :class="{ :style="{ transform: getScrollDistance() }">
'list-body2': isHorizontal <slot></slot>
}" ref="tBody" v-if="isCanScroll" :style="{ transform: getScrollDistance() }"> </div>
<slot></slot> <div
</div> class="list-body"
</div> :class="{
'list-body2': isHorizontal,
}"
ref="tBody"
v-if="isCanScroll"
:style="{ transform: getScrollDistance() }">
<slot></slot>
</div>
</div>
</template> </template>
<script lang='ts' setup> <script lang="ts" setup>
import {computed, ref, nextTick, onMounted } from 'vue'; import { computed, ref, nextTick, onMounted } from 'vue';
//滚动距离 //滚动距离
const scrollDistance = ref(0); const scrollDistance = ref(0);
//滚动容器高度 //滚动容器高度
@ -31,194 +39,176 @@ const animationFrame = ref();
const isCanScroll = ref(true); const isCanScroll = ref(true);
const scrollBody = ref<any>(null); const scrollBody = ref<any>(null);
const listBody = ref<any>(null); const listBody = ref<any>(null);
const props = defineProps( const props = defineProps({
{ steep: {
steep: { //滚动速度
//滚动速度 type: Number,
type: Number, default: 1,
default: 1 },
}, scrollDirection: {
scrollDirection: { //滚动方向
//滚动方向 type: String,
type: String, default: 'top',
default: "top" },
}, isRoller: {
isRoller: { //是否可以滑轮滚动
//是否可以滑轮滚动 type: Boolean,
type: Boolean, default: true,
default: true },
}, rollerScrollDistance: {
rollerScrollDistance: { //滑轮滚动的距离
//滑轮滚动的距离 type: Number,
type: Number, default: 20,
default: 20 },
}, data: Array,
data: Array });
}
)
const isHorizontal = computed(() => { const isHorizontal = computed(() => {
return props.scrollDirection === "left" || props.scrollDirection === "right" return props.scrollDirection === 'left' || props.scrollDirection === 'right';
}) });
const start = () => { const start = () => {
//判断是否可以滚动函数 //判断是否可以滚动函数
let isScrollFunc = (bodySize:number, listSize:number) => { let isScrollFunc = (bodySize: number, listSize: number) => {
if (bodySize > listSize || props.steep == 0) { if (bodySize > listSize || props.steep == 0) {
scrollDistance.value = 0; scrollDistance.value = 0;
isCanScroll.value = !1; isCanScroll.value = !1;
} }
}; };
isStop.value = !1; isStop.value = !1;
//判断是否可以滚动 //判断是否可以滚动
if (!isHorizontal.value) { if (!isHorizontal.value) {
isScrollFunc(bodyHeight.value, listHeight.value); isScrollFunc(bodyHeight.value, listHeight.value);
} else { } else {
isScrollFunc(bodyWidth.value, listWidth.value); isScrollFunc(bodyWidth.value, listWidth.value);
} }
if (isCanScroll.value) { if (isCanScroll.value) {
run(); run();
} }
} };
const run = () => { const run = () => {
//清空动画 //清空动画
clearAnimation(); clearAnimation();
animationFrame.value = window.requestAnimationFrame(() => { animationFrame.value = window.requestAnimationFrame(() => {
//滚动主逻辑函数 //滚动主逻辑函数
let main = (listSize:number, bodySize:number) => { let main = (listSize: number, bodySize: number) => {
let tempScrollDistance = Math.abs(scrollDistance.value); let tempScrollDistance = Math.abs(scrollDistance.value);
if (scrollDistance.value < 0) { if (scrollDistance.value < 0) {
let cc = 2 * listSize - bodySize; let cc = 2 * listSize - bodySize;
if (tempScrollDistance > cc) { if (tempScrollDistance > cc) {
scrollDistance.value = -(listSize - bodySize); scrollDistance.value = -(listSize - bodySize);
} }
} else { } else {
scrollDistance.value = -listSize; scrollDistance.value = -listSize;
} }
}; };
//根据滚动方向判断使用高度或宽度控制效果 //根据滚动方向判断使用高度或宽度控制效果
if (!isHorizontal.value) { if (!isHorizontal.value) {
main(listHeight.value, bodyHeight.value); main(listHeight.value, bodyHeight.value);
} else { } else {
main(listWidth.value, bodyWidth.value); main(listWidth.value, bodyWidth.value);
} }
//判断滚动值 //判断滚动值
if (!isStop.value) { if (!isStop.value) {
if ( if (props.scrollDirection === 'top' || props.scrollDirection === 'left') {
props.scrollDirection === "top" || scrollDistance.value -= props.steep;
props.scrollDirection === "left" } else if (props.scrollDirection === 'bottom' || props.scrollDirection === 'right') {
) { scrollDistance.value += props.steep;
scrollDistance.value -= props.steep; }
} else if ( run();
props.scrollDirection === "bottom" || }
props.scrollDirection === "right" });
) { };
scrollDistance.value += props.steep;
}
run();
}
});
}
const stop = () => { const stop = () => {
isStop.value = !0; isStop.value = !0;
clearAnimation(); clearAnimation();
} };
const initData = () => { const initData = () => {
nextTick(() => { nextTick(() => {
scrollDistance.value = 0; scrollDistance.value = 0;
isCanScroll.value = !0; isCanScroll.value = !0;
bodyHeight.value = scrollBody.value?.clientHeight; bodyHeight.value = scrollBody.value?.clientHeight;
bodyWidth.value = scrollBody.value?.clientWidth; bodyWidth.value = scrollBody.value?.clientWidth;
listHeight.value = listBody.value?.clientHeight; listHeight.value = listBody.value?.clientHeight;
listWidth.value = listBody.value?.clientWidth; listWidth.value = listBody.value?.clientWidth;
if ( if (
(bodyHeight.value !== 0 && (bodyHeight.value !== 0 && listHeight.value !== 0 && listHeight.value >= bodyHeight.value) ||
listHeight.value !== 0 && (bodyWidth.value !== 0 && listWidth.value !== 0 && listWidth.value >= bodyWidth.value)
listHeight.value >= bodyHeight.value) || ) {
(bodyWidth.value !== 0 && isCanScroll.value = true;
listWidth.value !== 0 && start();
listWidth.value >= bodyWidth.value) } else {
) { isCanScroll.value = false;
isCanScroll.value = true; }
start(); });
} else { };
isCanScroll.value = false;
}
});
}
// //获取滚动样式 // //获取滚动样式
const getScrollDistance = () => { const getScrollDistance = () => {
let style; let style;
if (!isHorizontal.value) { if (!isHorizontal.value) {
style = "translate(0px, " + scrollDistance.value + "px)"; style = 'translate(0px, ' + scrollDistance.value + 'px)';
} else { } else {
style = "translate(" + scrollDistance.value + "px,0px)"; style = 'translate(' + scrollDistance.value + 'px,0px)';
} }
return style; return style;
} };
const clearAnimation = () => { const clearAnimation = () => {
if (animationFrame.value) { if (animationFrame.value) {
cancelAnimationFrame(animationFrame.value); cancelAnimationFrame(animationFrame.value);
animationFrame.value = null; animationFrame.value = null;
} }
} };
const mouseenterFunc = () => { const mouseenterFunc = () => {
stop(); stop();
} };
const mouseleaveFunc = () => { const mouseleaveFunc = () => {
start(); start();
} };
const mousewheelFunc = (e:any) => { const mousewheelFunc = (e: any) => {
if (!isCanScroll.value || !props.isRoller) { if (!isCanScroll.value || !props.isRoller) {
return false; return false;
} }
let dis = e.deltaY; let dis = e.deltaY;
if (dis > 0) { if (dis > 0) {
scrollDistance.value -= props.rollerScrollDistance; scrollDistance.value -= props.rollerScrollDistance;
} else { } else {
scrollDistance.value += props.rollerScrollDistance; scrollDistance.value += props.rollerScrollDistance;
} }
run(); run();
} };
onMounted(() => { onMounted(() => {
//初始化页面数据 //初始化页面数据
initData(); initData();
} });
)
</script> </script>
<style scoped> <style scoped>
.custom-list { .custom-list {
white-space: nowrap; white-space: nowrap;
font-size: 14px; overflow: hidden;
overflow: hidden; height: 100%;
height: 100%;
} }
.list-body { .list-body {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 14px;
} }
.canScroll{ .canScroll {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.list-body2 { .list-body2 {
display: inline-block; display: inline-block;
} }
</style> </style>

7
src/components/ScrollTable.vue
View File

@ -2,10 +2,10 @@
<div class="scrolltable" :style="gridStyle"> <div class="scrolltable" :style="gridStyle">
<div class="row header"> <div class="row header">
<div class="cell">序号</div> <div class="cell">序号</div>
<div v-for="(head, i) in heads" :key="i" class="cell">{{ head }}</div> <div v-for="(head, i) in heads" class="cell">{{ head }}</div>
</div> </div>
<Scroll :data="datas" :steep="0.08" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50"> <Scroll :data="datas" :steep="0.08" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50">
<div v-for="(rows, i) in datas" class="row content" key="i"> <div v-for="(rows, i) in datas" class="row content">
<div class="cell no">{{ i + 1 }}</div> <div class="cell no">{{ i + 1 }}</div>
<div v-for="(row, r) in rows" :class="{ cell: true, [cellType[r]]: !!cellType[r], [row.split('.')[1]]: !!row.split('.')[1] }">{{ row.split('.')[0] }}</div> <div v-for="(row, r) in rows" :class="{ cell: true, [cellType[r]]: !!cellType[r], [row.split('.')[1]]: !!row.split('.')[1] }">{{ row.split('.')[0] }}</div>
</div> </div>
@ -104,7 +104,8 @@ const gridStyle = computed(() => {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAADYSURBVBiVTY8xSkNBGAbnX/YZHwTUEwQ9QCptbGwsxcJSEWxt0z1IEbBIZ+sBxPIpSC4ggim0sxc8gabJLtnNfikEyRxgmDGA+Drec0s3crhDgEJ5K7mMNo+bL9PLzW7KPJu0zRoy+608py6FMCSFLiW2Ps77Ps77lNiSQjeFMLTFZPAJ1BXhwE7ufgA0ud5J1O8GwVuOGZRRR//+1JFZzA6ytxymgqOi2OjpagxQyqxBLIWbmtrznpLuBVvrkQYzq+zSAMLDWW8DDUy2/3egjwV2W188fq8AvYtk5QJg+FMAAAAASUVORK5CYII=') background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAADYSURBVBiVTY8xSkNBGAbnX/YZHwTUEwQ9QCptbGwsxcJSEWxt0z1IEbBIZ+sBxPIpSC4ggim0sxc8gabJLtnNfikEyRxgmDGA+Drec0s3crhDgEJ5K7mMNo+bL9PLzW7KPJu0zRoy+608py6FMCSFLiW2Ps77Ps77lNiSQjeFMLTFZPAJ1BXhwE7ufgA0ud5J1O8GwVuOGZRRR//+1JFZzA6ytxymgqOi2OjpagxQyqxBLIWbmtrznpLuBVvrkQYzq+zSAMLDWW8DDUy2/3egjwV2W188fq8AvYtk5QJg+FMAAAAASUVORK5CYII=')
center center no-repeat; center center no-repeat;
} }
&.red { // 实例样式 &.red {
// 实例样式
&::before { &::before {
--iconwidth: 16px; --iconwidth: 16px;
content: ' '; content: ' ';