uniapp中，利用scroll-view组件封装table组件时，纵向滚动条与横向滚动条的自定义设置
前言
开发过程中，想要使用表格，但
uniapp原生UI与uviewUI等UI组件中都没有适用的table组件，这个时候需要自己根据需求功能封装table组件，考虑到可能会有监听滚动等需求，需要使用scroll-view组件进行开发。过程中发现纵向滚动条与横向滚动条的显示与样式问题很是令人头大，本博文的目的就是记录在封装table组件时，遇到一些问题的解决，当然主要是滚动条一系列问题。
问题一：滚动区域问题
- 问题阐述：想使用
scroll-view控制某个区域滚动，而不是整个页面滚动 - 解决：可以直接给
scroll-view设置一定的高度，让滚动控制在一定高度的区域内。（官网也写过点，需要注意）
问题二：实现纵向和横向可滚动
- 问题阐述：封装的
table表格，需要承载的数据量很大，并且列数很多，此时需要可以表格可以纵向和横向滚动 - 解决：
scroll-view组件有控制横向滚动scroll-x与纵向滚动scroll-y的属性设置，但默认值为false。实现纵向和横向可滚动如下：
//当内容超出时，允许滚动可横向滚动
<scroll-view
class="table"
:scroll-y="true"
:scroll-x="true"
"
>
</scroll-view>
问题三：没有显示滚动条
- 问题阐述：可以滚动，但没有滚动条，想要显示出横向与纵向的滚动条
- 分析问题：没有滚动条的原因是网页样式中的滚动条被隐藏了，如下图，图1 网页样式隐藏滚动条的样式：
图1 网页样式隐藏滚动条的样式
- 解决：写样式，替换掉网页隐藏滚动条的样式，如下：
//注意：lang="scss"
.table{
font-size: 28rpx;
// overflow: auto;//不需要此属性
background-color: #ffffff;
border:4rpx solid #a8a8a8;
// white-space: nowrap;//此属性没使用，子元素使用的弹性布局
// 设置滚动条整体样式， 这里没必要样式穿透 ::v-deep
& ::-webkit-scrollbar {
width: 8rpx !important;//设置纵向滚动条的宽（要加最高优先级）
height: 8rpx !important;//设置横向滚动条的高（原来它在这）
background-color: #f5f5f5 !important;
border-top: 2rpx solid #fff;
display: block;//必要属性（很有必要）
}
// 滚动条滑块
& ::-webkit-scrollbar-thumb {
background: rgba(20, 20, 20, 0.4) !important;
border-radius: 6rpx !important;
}
// 滚动条轨道
& ::-webkit-scrollbar-track {
background-color: #d9e5e5 !important;
}
//这里是列名的样式
.column{
...
}
//其他样式
...
}
问题四：列名吸顶
- 问题阐述：列名需要吸顶固定
- 解决：可以直接在设置列名的样式中使用粘性定位（直接就能使用，未遇到其它问题）
- 粘性定位注意事项（普遍的讲）：
- 父元素不能overflow:hidden或者overflow:auto属性
- 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
效果图如下，图2 table表格：
图2 table表格
其他的滚动监听之类要实现的功能，就使用scroll-view内置封装好的@scroll等事件，完全OK。
记录完毕。
