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

最新推荐文章于 2024-08-23 08:38:07 发布

不再是阿仁

最新推荐文章于 2024-08-23 08:38:07 发布

阅读量3.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lese_demo/article/details/90287112

版权

本文介绍了如何利用better-scroll插件在移动端实现表格上下左右滑动时保持表头和列固定，同时结合上拉加载功能。通过调整配置项和监听滚动事件，动态设置元素样式以实现固定效果，并详细讲解了上拉加载数据的实现过程。

摘要由CSDN通过智能技术生成

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

思路

显示结构

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

思路步骤

配置BScroll配置项
声明BScroll的scroll事件函数：onScroll，在里面取得所有.cross/.row/.clos元素，并对每个元素添加transform样式，且记录实时滚动的x,y值。.cross的x,y实时同步；.row的x为0，y同步；.clos的x同步，y为0。
声明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=