vue移動端表格，可橫行滾動铸豁，固定表頭灌曙，列

先看效果圖


效果圖.gif
第一步:引入 iscroll
npm i iscroll --save
第二步：封裝

對插件再做一層封裝，封裝成 iscrollTable.js 方便調(diào)用节芥，代碼如下：

// 統(tǒng)一使用
const IScollProbe = require('iscroll/build/iscroll-probe');

let scroller = null;
let Selector = '';
export function createIScroller(selector) {
  Selector = selector;
  scroller = new IScollProbe(Selector, {
    preventDefault: false, // 阻止瀏覽器滑動默認行為
    probeType: 3, // 需要使用 iscroll-probe.js 才能生效 probeType ： 1 滾動不繁忙的時候觸發(fā) probeType ： 2 滾動時每隔一定時間觸發(fā) probeType ： 3   每滾動一像素觸發(fā)一次
    mouseWheel: true, // 是否監(jiān)聽鼠標滾輪事件在刺。
    scrollX: true, // 啟動x軸滑動
    scrollY: true, // 啟動y軸滑動
    // momentum: false,
    lockDirection: false,
    snap: false, // 自動分割容器逆害，用于制作走馬燈效果等。Options.snap:true// 根據(jù)容器尺寸自動分割
    // snapSpeed: 400,
    scrollbars: false, // 是否顯示默認滾動條
    freeScroll: true, // 主要在上下左右滾動都生效時使用蚣驼，可以向任意方向滾動魄幕。
    deceleration: 0.0001, // 滾動動量減速越大越快，建議不大于 0.01,默認:0.0006
    disableMouse: true, // 是否關(guān)閉鼠標事件探測颖杏。如知道運行在哪個平臺纯陨，可以開啟它來加速。
    disablePointer: true, // 是否關(guān)閉指針事件探測留储。如知道運行在哪個平臺翼抠，可以開啟它來加速。
    disableTouch: false, // 是否關(guān)閉觸摸事件探測获讳。如知道運行在哪個平臺阴颖，可以開啟它來加速。
    eventPassthrough: false, // 使用 IScroll 的橫軸滾動時丐膝，如想使用系統(tǒng)立軸滾動并在橫軸上生效量愧，請開啟。
    bounce: false, // 是否啟用彈力動畫效果帅矗，關(guān)掉可以加速
  });

  function updatePosition() {
    const frozenCols = document.querySelectorAll(`${selector} table tr td.cols`);
    const frozenRows = document.querySelectorAll(`${selector} table tr th.rows`);
    const frozenCrosses = document.querySelectorAll(`${selector} table tr th.cross`);
    for (let i = 0; i < frozenCols.length; i++) {
      frozenCols[i].style.transform = `translate(${-1 * this.x}px, 0px) translateZ(0px)`;
    }
    for (let i = 0; i < frozenRows.length; i++) {
      frozenRows[i].style.transform = `translate(0px, ${-1 * this.y}px) translateZ(0px)`;
    }
    for (let i = 0; i < frozenCrosses.length; i++) {
      frozenCrosses[i].style.transform = `translate(${-1 * this.x}px,${-1 * this.y}px) translateZ(0px)`;
    }
  }
  scroller.on('scroll', updatePosition);
  scroller.on('scrollEnd', updatePosition);
  scroller.on('beforeScrollStart', () => {
    scroller.refresh();
  });

  return scroller;
}

export function refreshScroller() {
  if (scroller === null) {
    console.error('先初始化scroller');
    return;
  }
  setTimeout(() => {
    scroller.refresh();
    scroller.scrollTo(0, 0);
    const frozenCols = document.querySelectorAll(`${Selector} table tr td.cols`);
    const frozenRows = document.querySelectorAll(`${Selector} table tr th.rows`);
    const frozenCrosses = document.querySelectorAll(`${Selector} table tr th.cross`);
    for (let i = 0; i < frozenCols.length; i++) {
      frozenCols[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
    }
    for (let i = 0; i < frozenRows.length; i++) {
      frozenRows[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
    }
    for (let i = 0; i < frozenCrosses.length; i++) {
      frozenCrosses[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
    }
  }, 0);
}
export function destroyScroller() {
  if (scroller === null) {
    return;
  }
  scroller.destroy();
  scroller = null;
}
第三步：頁面使用

引用前面的自己封裝的iscrollTable.js偎肃，用到的table.vue的具體代碼如下：

<template>
    <div class="pages-tables " id="pages-tables">
        <div class="waterMask" id="watermark"></div>
        <div class="rolling-table meal-table" ref="tableBox" :style="{height: maxHeight + 'px'}">
            <table class="table" id="table" cellpadding="0" cellspacing="0" ref="rollingTable">
                <tr v-for="(x,i) in xList" :key="i">
                    <th class="rows " :class="{'cross': index == 0 && i == 0}" v-for="(l,index) in x" :key="index" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
                </tr>
               <tr v-for="(l,i) in yList" :key="i + 'a'">
                    <template v-for="(x, xKey) in xField" >
                       <template v-for="(ll,yKey) in l">
                          <td  :key="xKey+yKey" v-if="x === yKey" :class="{'cols': yKey == xField[0]|| yKey == xField[1]}">
                              {{ yList[i][yKey]}}
                          </td>
                         </template>
                    </template>
                </tr>
                <tr></tr>
            </table>
        </div>
    </div>
</template>
<script>
//demo中沒有用到refreshScroller，當需要刷新回到頁面頂部時調(diào)用
import { createIScroller, refreshScroller, destroyScroller } from "libs/iscrollTable";
export default {
    data() {
        return {
            maxHeight:'100%',
            scroll: {
                scroller: null
            },
            xList: [
                [
                    {
                        field_name: "statis_date",
                        name: "第一行合并3行1列",
                        colspan: 1, //指定單元格 橫向 跨越的 列數(shù)
                        rowspan: 3, //指定單元格 縱向 跨越的 行數(shù)
                    },
                    {
                        field_name: "custom_field",
                        name: "第一行合并2列",
                        colspan: 2,
                        rowspan: 1,
                    },
                    {
                        field_name: "custom_field",
                        name: "第一行合并2列",
                        colspan: 2,
                        rowspan: 1,
                    },
                    {
                        field_name: "custom_field",
                        name: "第一行合并3列",
                        colspan: 3,
                        rowspan: 1,
                    },
                ],
                [
                    {
                        field_name: "custom_field",
                        name: "第二行日期",
                        colspan: 1, //指定單元格 橫向 跨越的 列數(shù)
                        rowspan: 1, //指定單元格 縱向 跨越的 行數(shù)
                    },
                    {
                        field_name: "custom_field",
                        name: "第二行日期合并2列",
                        colspan: 2,
                        rowspan: 1,
                    },
                    {
                        field_name: "custom_field",
                        name: "第二行日期合并2列",
                        colspan: 2,
                        rowspan: 1,
                    },
                    {
                        field_name: "custom_field",
                        name: "第二行日期合并3列",
                        colspan: 3,
                        rowspan: 1,
                    },
                ],
                [
                    {
                        field_name: "area_name",
                        name: "第三行當月新增",
                        colspan: 1,  //指定單元格 橫向 跨越的 列數(shù)
                        rowspan: 1, //指定單元格 縱向 跨越的 行數(shù)
                    },
                    {
                        field_name: "area_name1",
                        name: "第三行當月新增1",
                        colspan: 1,
                        rowspan: 1,
                    },
                    {
                        field_name: "area_name2",
                        name: "第三行當月新增2",
                        colspan: 1,
                        rowspan: 1,
                    },
                    {
                        field_name: "area_name3",
                        name: "第三行當月新增3",
                        colspan: 1,
                        rowspan: 1,
                    },
                    {
                        field_name: "area_name4",
                        name: "第三行當月新增4",
                        colspan: 1,
                        rowspan: 1,
                    },
                    {
                        field_name: "area_name5",
                        name: "第三行當月新增5",
                        colspan: 1,
                        rowspan: 1,
                    },
                    {
                        field_name: "area_name6",
                        name: "第三行當月新增6",
                        colspan: 1,
                        rowspan: 1,
                    },
                ],
            ],
            xField: ['statis_date', 'area_name', "area_name1", "area_name2", "area_name3", "area_name4", "area_name5", "area_name6",],
            yList: [
                {
                    area_name: "新增數(shù)據(jù)開始",
                    area_name1: "新增數(shù)據(jù)開始1",
                    area_name2: "新增數(shù)據(jù)開始2",
                    area_name3: "新增數(shù)據(jù)開始3",
                    area_name4: "新增數(shù)據(jù)開始4",
                    area_name5: "新增數(shù)據(jù)開始5",
                    area_name6: "新增數(shù)據(jù)開始6",
                    statis_date: 100007,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)",
                    area_name1: "新增數(shù)據(jù)1",
                    area_name2: "新增數(shù)據(jù)2",
                    area_name3: "新增數(shù)據(jù)3",
                    area_name4: "新增數(shù)據(jù)4",
                    area_name5: "新增數(shù)據(jù)5",
                    area_name6: "新增數(shù)據(jù)6",
                    statis_date: 201807,
                },
                {
                    area_name: "新增數(shù)據(jù)最后",
                    area_name1: "新增數(shù)據(jù)最后1",
                    area_name2: "新增數(shù)據(jù)最后2",
                    area_name3: "新增數(shù)據(jù)最后3",
                    area_name4: "新增數(shù)據(jù)最后4",
                    area_name5: "新增數(shù)據(jù)最后5",
                    area_name6: "新增數(shù)據(jù)最后6",
                    statis_date: 222222,
                }
            ]
        }
    },
    mounted() {
        this.maxHeight = window.screen.height
        this.scroll.scroller = createIScroller(".meal-table");
        // addWaterMarker(document.getElementById('watermark'))
    },
    beforeDestroy() {
      destroyScroller();
    },
}

</script>
<style lang="less" scoped>
.pages-tables {
  -webkit-overflow-scrolling: touch; // ios滑動順暢
  position: relative;
}
.rolling-table {
    height: 100%;
    font-size: 0.28rem;
    color: #86939a;
    background-color: #fff;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    position: relative;
    top: 0;
    overflow: hidden;
  }
.rows {
    position: relative;
    z-index: 3;
}
.cross {
    position: relative;
    z-index: 5;
}
table td {
  border: 0px solid #000;
  font-size: 0.32rem;
  background: #fff;
}
::-webkit-scrollbar {
    display: none;
}
.table {
//   border-collapse: collapse; //去掉重復(fù)的border
  color: #86939e;
  font-size: 0.32rem;
  border: 0px solid #000;
  min-height: 100%;
  text-align: center;
  td {
    border-bottom: 0.02rem solid #eee;
    white-space: nowrap;
    height: 0.86rem;
    line-height: 0.86rem;
    padding: 0 0.2rem;
  }
  th {
    color: #43484d;
    white-space: nowrap;
    height: 0.74rem;
    line-height: 0.74rem;
    padding: 0rem 0.3rem;
    background-color: #f3f4f6;
    font-weight: normal;
    padding-bottom: 0;
    padding-top: 0;
    border: 0.02rem solid red;
  }
}
tr{
    position: relative;
    background-color: #fff;
    &:nth-of-type(odd){
        td{
            // background-color: pink;
        }
    }
}
</style>

注意：
如果頁面中需要多個列固定损晤，參考下圖：


image.png

如果幫組到您软棺，請舉小手手贊一下，筆芯 ???

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末尤勋，一起剝皮案震驚了整個濱河市喘落，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌最冰，老刑警劉巖瘦棋，帶你破解...
    沈念sama閱讀 221,430評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異暖哨，居然都是意外死亡赌朋，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3贊 398
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門篇裁，熙熙樓的掌柜王于貴愁眉苦臉地迎上來沛慢，“玉大人，你說我怎么就攤上這事达布⊥偶祝” “怎么了？”我有些...
    開封第一講書人閱讀 167,834評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵黍聂，是天一觀的道長躺苦。 經(jīng)常有香客問我身腻，道長柿菩，這世上最難降的妖魔是什么鸵贬？ 我笑而不...
    開封第一講書人閱讀 59,543評論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮绳姨，結(jié)果婚禮上愈诚，老公的妹妹穿的比我還像新娘她按。我一直安慰自己，他們只是感情好扰路，可當我...
    茶點故事閱讀 68,547評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布尤溜。 她就那樣靜靜地躺著，像睡著了一般汗唱。 火紅的嫁衣襯著肌膚如雪宫莱。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 52,196評論 1贊 308
  • 城市分裂傳說
    那天哩罪，我揣著相機與錄音授霸，去河邊找鬼。 笑死际插，一個胖子當著我的面吹牛碘耳，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播框弛，決...
    沈念sama閱讀 40,776評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼辛辨，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了瑟枫？” 一聲冷哼從身側(cè)響起斗搞，我...
    開封第一講書人閱讀 39,671評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎慷妙，沒想到半個月后僻焚，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,221評論 1贊 320
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡膝擂，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,303評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年虑啤，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片架馋。...
    茶點故事閱讀 40,444評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡狞山，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出叉寂，到底是詐尸還是另有隱情铣墨，我是刑警寧澤，帶...
    沈念sama閱讀 36,134評論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布办绝，位于F島的核電站伊约，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏孕蝉。R本人自食惡果不足惜屡律，卻給世界環(huán)境...
    茶點故事閱讀 41,810評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望降淮。 院中可真熱鬧超埋，春花似錦、人聲如沸佳鳖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0贊 24
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽系吩。三九已至来庭，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間穿挨，已是汗流浹背月弛。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留科盛，地道東北人帽衙。 一個月前我還...
    沈念sama閱讀 48,837評論 3贊 376
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像贞绵，于是被迫代替她去往敵國和親厉萝。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 45,455評論 2贊 359