可直接復(fù)制代碼使用
<template>
? <div class="pages">
? ? <div class="tables">
? ? ? <div class="tits">
? ? ? ? <div class="titsLeft">
? ? ? ? ? <p>左上角</p>
? ? ? ? </div>
? ? ? ? <div class="titsRight" ref="titsRight">
? ? ? ? ? <div>
? ? ? ? ? ? <p v-for="(item, i) in 50" :key="i">表頭{{ i + 1 }}</p>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="tbody" @scroll="scrollEvent($event)" ref="tbodyRight" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
? ? ? ? <div class="tbodyLeft" ref="tbodyLeft">
? ? ? ? ? <div ref="tbodyLeftItem">
? ? ? ? ? ? <p v-for="(item, i) in 50" :key="i">首列{{ i + 1 }}</p>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="tbodyRight">
? ? ? ? ? <div v-for="(item, i) in 50" :key="i" class="row">
? ? ? ? ? ? <p v-for="(item1, i1) in 50" :key="i1">{{ i + 1 }}-{{ i1 + 1 }}</p>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? name: "tables",
? data() {
? ? return {
? ? ? /* 移動(dòng)所需參數(shù) */
? ? ? startX: 0,
? ? ? startY: 0,
? ? ? endX: 0,
? ? ? endY: 0,
? ? ? isMove: false,
? ? };
? },
? methods: {
? ? scrollEvent(e) {
? ? ? this.$refs.titsRight.style.left = -e.target.scrollLeft + 60 + "px";
? ? ? this.$refs.tbodyLeftItem.style.top = -e.target.scrollTop + "px";
? ? },
? ? /* 監(jiān)聽滑動(dòng)開始 */
? ? touchstart(e) {
? ? ? /* 阻止一些默認(rèn)事件 */
? ? ? // e.preventDefault();
? ? ? /* 記錄初始位置 */
? ? ? this.startX = e.touches[0].pageX;
? ? ? this.startY = e.touches[0].pageY;
? ? ? console.log(this.startX, this.startY);
? ? },
? ? /* 監(jiān)聽滑動(dòng)移動(dòng) */
? ? touchmove(e) {
? ? ? /* 判斷是否滾動(dòng) */
? ? ? this.isMove = true;
? ? ? /* 監(jiān)聽滑動(dòng)最終結(jié)束的位置 */
? ? ? this.endX = e.touches[0].pageX;
? ? ? this.endY = e.touches[0].pageY;
? ? ? /* 判斷移動(dòng)方向 */
? ? ? let X = this.endX - this.startX,
? ? ? ? Y = this.endY - this.startY;
? ? ? /* 判斷是否移動(dòng)還是點(diǎn)擊 */
? ? ? if (this.isMove) {
? ? ? ? if (X > 0 && Math.abs(X) > Math.abs(Y)) {
? ? ? ? ? //向右
? ? ? ? ? console.log("向右");
? ? ? ? ? this.$refs.tbodyRight.style["overflowY"] = "hidden";
? ? ? ? ? this.$refs.tbodyRight.style["overflowX"] = "auto";
? ? ? ? } else if (X < 0 && Math.abs(X) > Math.abs(Y)) {
? ? ? ? ? //向左
? ? ? ? ? console.log("向左");
? ? ? ? ? this.$refs.tbodyRight.style["overflowY"] = "hidden";
? ? ? ? ? this.$refs.tbodyRight.style["overflowX"] = "auto";
? ? ? ? } else if (Y > 0 && Math.abs(Y) > Math.abs(X)) {
? ? ? ? ? //向下
? ? ? ? ? console.log("向下");
? ? ? ? ? this.$refs.tbodyRight.style["overflowX"] = "hidden";
? ? ? ? ? this.$refs.tbodyRight.style["overflowY"] = "auto";
? ? ? ? } else if (Y < 0 && Math.abs(Y) > Math.abs(X)) {
? ? ? ? ? //向上
? ? ? ? ? console.log("向上");
? ? ? ? ? this.$refs.tbodyRight.style["overflowX"] = "hidden";
? ? ? ? ? this.$refs.tbodyRight.style["overflowY"] = "auto";
? ? ? ? } else {
? ? ? ? ? // console.log("沒有");
? ? ? ? }
? ? ? } else {
? ? ? ? // console.log("沒有");
? ? ? }
? ? },
? },
};
</script>
<style scoped lang="scss">
::-webkit-scrollbar {
? /*隱藏滾輪*/
? display: none;
}
* {
? margin: 0;
? padding: 0;
}
p {
? width: 60px;
? height: 40px;
? text-align: center;
? line-height: 40px;
? flex-shrink: 0;
}
.pages{
? // background:red;
? margin: 4px;
}
.tables {
? width: 100%; //自定義表格整體寬度
? font-size: 12px;
? overflow: hidden;
? box-sizing: border-box;
? display: flex;
? flex-direction: column;
? position: relative;
? // border-right: 1px solid red;
? // border-bottom: 1px solid red;
? // border-bottom: 1px solid #ccc;
? .tbody {
? ? // height: 400px; //自定義表格內(nèi)容高度
? ? overflow: auto;
? }
? > div {
? ? display: flex;
? }
? div {
? ? flex-shrink: 0;
? }
? .tits {
? ? height: 40px;
? ? padding-left: 60px;
? ? background-color: #fff;
? }
? .titsLeft,
? .tbodyLeft {
? ? width: 60px;
? }
? .titsRight,
? .tbodyRight {
? ? width: 250px; //自定義表頭表體內(nèi)容寬度
? }
? .titsLeft {
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? z-index: 100;
? ? p {
? ? ? width: 60px;
? ? ? background-color: #fff;
? ? ? border-bottom: 1px solid #ccc;
? ? }
? }
? .titsRight {
? ? height: 40px;
? ? position: absolute;
? ? top: 0;
? ? div {
? ? ? display: flex;
? ? ? right: 17px;
? ? ? p {
? ? ? ? background-color: #fff;
? ? ? ? border-bottom: 1px solid #ccc;
? ? ? ? border-left: 1px solid #ccc;
? ? ? }
? ? }
? }
? .tbodyLeft {
? ? // overflow: hidden;
? ? white-space: nowrap;
? ? height: 100%;
? ? background-color: #fff;
? ? div {
? ? ? margin-top: 40px;
? ? ? width: 60px;
? ? ? background-color: #fff;
? ? ? left: 0;
? ? ? top: 0px;
? ? ? position: absolute;
? ? ? overflow: hidden;
? ? ? p {
? ? ? ? border-bottom: 1px solid #ccc;
? ? ? }
? ? ? // padding-top: 40px;
? ? ? // bottom: 17px; //避開下方滾動(dòng)條位置
? ? }
? }
? .tbodyRight {
? ? white-space: nowrap;
? ? background-color: none;
? ? display: flex;
? ? flex-direction: column;
? ? .row {
? ? ? display: flex;
? ? ? p {
? ? ? ? border-bottom: 1px solid #ccc;
? ? ? ? border-left: 1px solid #ccc;
? ? ? }
? ? }
? }
}
</style>
