利用better-scroll插件作移动端table可上下左右滑动且固定表头和列

上下左右滑动时固定表头、列&上拉加载

思路

显示结构

.cross	.row	.row
data.clos	data	data
data.clos	data	data

思路步骤

1. 配置BScroll配置项
2. 声明BScroll的scroll事件函数：onScroll，在里面取得全部.cross/.row/.clos元素，并对每一个元素添加transform样式，且记录实时滚动的x,y值。.cross的x,y实时同步；.row的x为0，y同步；.clos的x同步，y为0。
3. 声明BScroll的pullUpLoad事件(上拉加载)函数：onPullUpLoad，在函数里获取数据，用this.$nextTick()获取全部.cross/.row/.clos元素，并对每一个元素添加transform样式，设置为声明时所记录的实时滚动的x,y值。

代码

// html
<div class="wrapper">
  <div class="content" ref="BScroll">
    <table>
      <tr>
        <th class="cross"></th>
        <th class="rows"></th>
        <th class="rows"></th>
      </tr>
      <tr>
        <td class="clos"></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="clos"></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <div class="loadMore">上拉加载更多....</div>
  </div>
</div>
<style> .content{ overflow: hidden; max-height: max-height; } </style>

// js
data(){
    return {
        scroller: null,
        X: 0,
        Y: 0,
        flag: false,
    }
},
_init(){ // 初始化配置
    const that = this
    this.scroller = new BScroll(this.$refs.BScroll, {
        preventDefault: false, // 阻止浏览器默认行为
        probeType: 3, // 1:非实时派发scroll事件; 2:在屏幕滑动的过程当中实时的派发 scroll 事件; 3:不只在屏幕滑动的过程当中，并且在 momentum 滚动动画运行过程当中实时派发 scroll 事件。
        scrollX: true, // 启动x轴滚动
        scrollY: true, // 启动y轴滚动
        momentum: false, // 是否开启快速滑动
        directionLockThreshold: 0, // 斜滑时，锁定一个方向滚动
        bounce: { // 滑动到边缘时出现回弹动画
            top: false,
            bottom: true,
            left: false,
            right: false
        },
        pullUpLoad: { // 开启上拉加载，Boolean | Object
            threshold: 50
        }
    })
    function _onScroll() { // 滚动函数
        const frozenCrosses = document.querySelectorAll('#wrapper .cross');
        const frozenRows = document.querySelectorAll('#wrapper .rows');
        const frozenClos = document.querySelectorAll('#wrapper .clos');
        const loadMore = document.querySelectorAll('#wrapper .loadMore');
        that.X = this.x
        that.Y = this.y
        frozenCrosses.forEach((el) => {
            el.style.transform = `translate(${this.x}px, ${this.y}px, 0px)`
        })
        frozenRows.forEach((el) => {
            el.style.transform = `translate(0px, ${this.y}px, 0px)`
        })
        frozenClos.forEach((el) => {
            el.style.transform = `translate(${this.x}px, 0px, 0px)`
        })
        loadMore.forEach((el) => {
            el.style.transform = `translate(0px, ${this.y}px, 0px)`
        })
    }
    function _onPullUpLoad() { // 上拉加载函数
        if(!that.flag){
            //获取数据操做....
            that.$nextTick(()=>{
                const frozenCrosses = document.querySelectorAll('#wrapper .cross');
                const frozenRows = document.querySelectorAll('#wrapper .rows');
                const frozenClos = document.querySelectorAll('#wrapper .clos');
                const loadMore = document.querySelectorAll('#wrapper .loadMore');
                frozenCrosses.forEach((el) => {
                    el.style.transform = `translate3d(${that.x}px, ${that.y}px, 0px)`
                })
                frozenRows.forEach((el) => {
                    el.style.transform = `translate3d(0px, ${that.y}px, 0px)`
                })
                frozenClos.forEach((el) => {
                    el.style.transform = `translate3d(${that.x}px, 0px, 0px)`
                })
                loadMore.forEach((el) => {
                    el.style.transform = `translate3d(0px, ${that.y}px, 0px)`
                })
            })
            that.scroller.finishPullUp()
            that.scroller.refresh()
        }
    }
    this.scroller.on('scroll',_onScroll)
    this.scroller.on('scrollEnd',_onScroll)
    this.scroller.on('pullingUp',_onPullUpLoad)
    this.scroller.on('beforeScrollStart',()=>{
        setTimeout(()=>{
            this.scroller.refresh()
        },20)
    })
},
mounted(){
    this.$nextTick(()=>{
    	this._init()
    })    
}