2020-11-17 better-scroll vue实现手机端浏览表格，表头和首列固定显示

前提准备

安装： npm i better-scroll --S

接下来直接放代码：

<div id="left"

ref="left">

<div class="title_box1"

:style="{top:top+'px'}">

</div>

<div v-for="(item,index) in 150"

:key="index"

class="title_box">

<div class="title_child1">{{index}}右侧0</div>

</div>

<div id="right"

ref="right">

<div>

头部

</div>

<div v-for="(item,index) in 150"

:key="index">

右侧{{index}}

</div>

</template>

import BScroll from 'better-scroll' //1.引入滚动插件

let BSleft = null

let right_scroll = null

let left_scroll = null

export default {

data () {

return {

flag: true,

top: ""

}

mounted () {

//创建滚动插件

//滚动效果只能作用于this.$refs.left 元素的第一个子盒子，所以要根据需求将布局放在同一个div（子盒子）里面。

//并且在设置子盒子的宽高时要根据滚动的要求设置。即在父盒子设置固定宽高后，子盒子要超过父盒子高度。

BSleft = new BScroll(this.$refs.left, {

probeType: 3,

scrollY: true, //Y轴滚动

scrollX: true, //X轴滚动

click: true, //允许点击事件

bounce: false, //回弹效果

momentumLimitDistance: 5

})

left_scroll = this.$refs.left

right_scroll = this.$refs.right

//滚动开始的事件

BSleft.on('scrollStart', (pos) => {

console.log(pos);

})

//滚动的事件

BSleft.on('scroll', (pos) => {

right_scroll.scrollTop = -pos.y

this.top = -pos.y

console.log(pos);

})

//滚动结束后的事件

BSleft.on('scrollEnd', (pos) => {

console.log(pos);

})

methods: {

}

</script>

#div_page {

width: 100vw;

height: 100vh;

display: flex;

justify-self: left;

}

#right {

width: 20%;

height: 100vh;

overflow: hidden;

box-sizing: border-box;

}

.title_child2 {

position: fixed;

top: 0px;

right: 0px;

width: 20%;

height: 20px;

line-height: 20px;

background: rgb(136, 136, 201);

text-align: center;

box-sizing: border-box;

border-left: 1px solid #a7a5a5;

border-bottom: 1px solid #a7a5a5;

}

.right_data {

margin-top: 20px;

}

.title_child {

width: 100%;

height: 20px;

line-height: 20px;

text-align: center;

box-sizing: border-box;

border-left: 1px solid #a7a5a5;

border-bottom: 1px solid #a7a5a5;

}

.title_child1 {

width: 10%;

height: 20px;

line-height: 20px;

text-align: center;

box-sizing: border-box;

border-left: 1px solid #a7a5a5;

border-bottom: 1px solid #a7a5a5;

}

#left {

background: #b2e4d7;

width: 80%;

height: 100vh;

overflow: hidden;

box-sizing: border-box;

border: 1px solid #a7a5a5;

}

.left_box {

width: 1000px;

height: auto;

}

.left_data {

padding-top: 20px;

}

.title_box {

width: 1000px;

height: 20px;

line-height: 20px;

display: flex;

justify-self: left;

}

.title_box1 {

position: fixed;

left: 0;

width: 1000px;

height: 20px;

line-height: 20px;

background: rgb(136, 136, 201);

display: flex;

justify-self: left;

}

</style>

安装完better-scroll插件后，此代码在vue项目中可以直接运行，可以进行学习测试（变量取名比较随意）。

下面说一下，使用better-scroll的注意点：

1.创建better-scroll之前，要保证dom是已经渲染完成的，不然会造成作用上但是不能滚动的bug（在项目中一般是异步请求数据渲染，因此在注意在加载完成后再创建组件。）。

2.父盒子的宽高要固定，超出要隐藏（overflow：hidden），子盒子的宽高至少有一个是设置的超过父盒子宽度或者由内容撑开并超过父盒子。

这个demo只是简单的实现，因为优化不好并未采用，只是给大家提供一个思路。大家还得动脑子去优化啊，另外，组件中的其他参数还是需要大家自己摸索了。

将组件中的参数和方法放下面供大家参考：

Options 参数

startX: 0 开始的X轴位置

startY: 0 开始的Y轴位置

scrollY: true 滚动方向为 Y 轴

scrollX: true 滚动方向为 X 轴

click: true 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用_constructed，若是bs派发的则为true

directionLockThreshold: 5

momentum: true 当快速滑动时是否开启滑动惯性

bounce: true 是否启用回弹动画效果

selectedIndex: 0 wheel 为 true 时有效，表示被选中的 wheel 索引

rotate: 25 wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度

wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置

snap: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置

snapLoop: false 是否可以无缝循环轮播

snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页

snapSpeed: 400, 轮播图切换的动画时间

swipeTime: 2500 swipe 持续时间

bounceTime: 700 弹力动画持续的毫秒数

adjustTime: 400 wheel 为 true 有用，调整停留位置的时间

swipeBounceTime: 1200 swipe 回弹时间

deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01

momentumLimitTime: 300 符合惯性拖动的最大时间

momentumLimitDistance: 15 符合惯性拖动的最小拖动距离

resizePolling: 60 重新调整窗口大小时，重新计算better-scroll的时间间隔

preventDefault: true 是否阻止默认事件

preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件

HWCompositing: true 是否启用硬件加速

useTransition: true 是否使用CSS3的Transition属性

useTransform: true 是否使用CSS3的Transform属性

probeType: 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

Events 事件

beforeScrollStart - 滚动开始之前触发

scrollStart - 滚动开始时触发

scroll - 滚动时触发

scrollCancel - 取消滚动时触发

scrollEnd - 滚动结束时触发

touchend - 手指移开屏幕时触发

flick - 触发了 fastclick 时的回调函数

refresh - 当 better-scroll 刷新时触发

destroy - 销毁 better-scroll 实例时触发

函数列表

scrollTo(x, y, time, easing)

滚动到某个位置，x,y 代表坐标，time 表示动画时间，easing 表示缓动函数

scroll.scrollTo(0, 500)

scrollToElement(el, time, offsetX, offsetY, easing)

滚动到某个元素，el（必填）表示 dom 元素，time 表示动画时间，offsetX 和 offsetY 表示坐标偏移量，easing 表示缓动函数

refresh()

强制 scroll 重新计算，当 better-scroll 中的元素发生变化的时候调用此方法

getCurrentPage()

snap 为 true 时，获取滚动的当前页，返回的对象结构为 {x, y, pageX, pageY}，其中 x,y 代表滚动横向和纵向的位置；pageX，pageY 表示横向和纵向的页面索引。用法如：getCurrentPage().pageX

goToPage(x, y, time, easing)

snap 为 true，滚动到对应的页面，x 表示横向页面索引，y 表示纵向页面索引， time 表示动画，easing 表示缓动函数（可省略不写）

enable()启用 better-scroll，默认开启

disable() 禁用 better-scroll

destroy() 销毁 better-scroll，解绑事件

链接：https://www.jianshu.com/p/035080954ee9