本文共 3825 字，大约阅读时间需要 12 分钟。

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

思路

显示结构

思路步骤

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
   
  
    
    
     
    
     
      上拉加载更多....
     
  
    
   

// jsdata(){
       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()    })    }

转载地址：https://blog.csdn.net/lese_demo/article/details/90287112 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！