作者:weiwei | 来源:互联网 | 2024-10-26 12:04
滚动前:滚动后: 上代码 1.引入 iscrollnpm i iscroll --save 2.封装iscrollTable.js// 统一使用const IScollProbe = require(
滚动前:
滚动后: 上代码 1.引入 iscroll
npm i iscroll --save
2.封装iscrollTable.js
// 统一使用 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 滚动不繁忙的时候触发 probeType : 2 滚动时每隔一定时间触发 probeType : 3 每滚动一像素触发一次 mouseWheel: true, // 是否监听鼠标滚轮事件。 scrollX: true, // 启动x轴滑动 scrollY: true, // 启动y轴滑动 // momentum: false, lockDirection: false, snap: false, // 自动分割容器,用于制作走马灯效果等。Options.snap:true// 根据容器尺寸自动分割 // snapSpeed: 400, scrollbars: false, // 是否显示默认滚动条 freeScroll: true, // 主要在上下左右滚动都生效时使用,可以向任意方向滚动。 deceleration: 0.0001, // 滚动动量减速越大越快,建议不大于 0.01,默认:0.0006 disableMouse: true, // 是否关闭鼠标事件探测。如知道运行在哪个平台,可以开启它来加速。 disablePointer: true, // 是否关闭指针事件探测。如知道运行在哪个平台,可以开启它来加速。 disableTouch: false, // 是否关闭触摸事件探测。如知道运行在哪个平台,可以开启它来加速。 eventPassthrough: false, // 使用 IScroll 的横轴滚动时,如想使用系统立轴滚动并在横轴上生效,请开启。 bounce: false, // 是否启用弹力动画效果,关掉可以加速 }); 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[i].style.transform = `translate(${-1 * this.x}px, 0px) translateZ(0px)`; } for (let i = 0; i frozenRows[i].style.transform = `translate(0px, ${-1 * this.y}px) translateZ(0px)`; } for (let i = 0; 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[i].style.transform = 'translate(0px, 0px) translateZ(0px)'; } for (let i = 0; i frozenRows[i].style.transform = 'translate(0px, 0px) translateZ(0px)'; } for (let i = 0; i frozenCrosses[i].style.transform = 'translate(0px, 0px) translateZ(0px)'; } }, 0); } export function destroyScroller() { if (scroller === null) { return; } scroller.destroy(); scroller = null; }
3.html使用
{{l.name}} {{ yList[i][yKey]}}
如果需要设置多列固定,可参考如下方法。