资讯专栏INFORMATION COLUMN

vue实现列表固定列滚动

3403771864 / 1016人阅读

  想要在移动端中实现列表固定列固定样式,可以用vue+scss以下具体内容:

  功能介绍:

  在移动端开发中,会用到列表作为信息展示方式,一般希望上下滚动时,可以固定表头,左右滚动时,可以固定最左列。

  大致需求:

  1、数组循环遍历可以让列表所有内容循环展示

  2、在上下滚动时,固定表头在最顶端显示;

  3、在左右滚动时,固定左边一列或多列可以固定显示;

  4、列表的列宽允许在数组中设置;

  整体思路:

  1、页面使用四个bom元素分别存储四种元素:

  1)固定在左上角,完全不参与滚动表头元素;

  2)固定在顶部,只允许左右滚动表头元素;

  3)固定在左侧,只允许上下滚动列元素;

  4)右下角,左右上下均可随意滚动列元素;

  2、表头数组与列表数据数组之间互相联系,表头属性可以控制列表列排序、列表宽度、是否为固定列等;

  3、四个dom之间增加联动,使用@scroll、scrollLeft、scrollTop;

  具体实现:

  一、display:flex布局,分为四组容器布局:


  

<!-- 宽度增加动态设置 -->
  <div class="box">
  <div class="table-box">
  <div class="fixedHeadBox"
  :style="{width: fixedWid}"></div>
  <div class="nomalHeadBox"
  style="{width: 'calc(100% - '+fixedWid+')'}"
  ></div>
  <div class="fixedListBox"
  :style="{width: fixedWid}"></div>
  <div class="nomalListBox"
  :style="{width: 'calc(100% - '+fixedWid+')'}"
  ></div>
  </div>
  </div>
  </div>

 

  export default {
  data() {
  return {
  fixedWid: ''
  };
  }
  }

 

  .box {
  width: 100vw; height: 100vh;
  box-sizing: border-box;
  padding: 5vh 5vw;
  background: #000;
  }
  $headHei: 40px;
  .table-box {
  width: 100%; height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  .fixedHeadBox {
  background: pink;
  height: $headHei;
  }
  .nomalHeadBox {
  background: yellow;
  height: $headHei;
  overflow: hidden;
  }
  .fixedListBox{
  height: calc(100% - #{$headHei});
  background: lightblue;
  overflow: hidden;
  }
  .nomalListBox {
  background: #fff;
  height: calc(100% - #{$headHei});
  overflow: auto;
  }
  }


  二、列表头部、内部数据绑定:

  应用到v-for遍历表头、列表数据,并计算列表宽度:

  <div class="fixedHeadBox" :style="{width: fixedWid}">
  <ul>
  <li v-for="(item, index) in fixedHead" :key="index"
  :style="{width: item.width}">
  {{item.name}}
  </li>
  </ul>
  </div>
  <div class="nomalHeadBox"
  :style="{width: 'calc(100% - '+fixedWid+')'}">
  <div ref="nomalHeadBox">
  <ul :style="{width: nomalWid}">
  <li v-for="(item, index) in nomalHead"
  :key="index" :style="{width: item.width}">
  {{item.name}}
  </li>
  </ul>
  </div>
  </div>
  <div class="fixedListBox" :style="{width: fixedWid}">
  <div ref="fixedListBox">
  <ul v-for="(item, index) in list" :key="index" >
  <li v-for="(it, index) in fixedHead" :key="index"
  :style="{width: it.width}">
  {{item[it.prop]}}
  </li>
  </ul>
  </div>
  </div>
  <div class="nomalListBox" ref="nomalListBox"
  :style="{width: 'calc(100% - '+fixedWid+')'}">
  <ul :style="{width: nomalWid}"
  v-for="(item, index) in list" :key="index">
  <li v-for="(it, index) in nomalHead" :key="index"
  :style="{width: it.width}">
  {{item[it.prop]}}
  </li>
  </ul>
  </div>


  data() {
  return {
  tableHead: [
  { name: '', prop: 'a', width: '100px', isfixed: true },
  { name: '', prop: 'b', width: '80px' },
  { name: '', prop: 'c', width: '80px' },
  { name: '', prop: 'd', width: '100px' },
  { name: '', prop: 'e', width: '100px' },
  { name: '', prop: 'f', width: '100px' },
  { name: '', prop: 'g', width: '120px' }
  ],
  list: [
  { a: '', b: '', c: '', d: '', e: '', f: '', g: '' }
  ],
  fixedHead: [],
  nomalHead: [],
  fixedWid: '',
  nomalWid: ''
  };
  },
  mounted() {
  this.initData();
  },
  methods: {
  initData() {
  this.fixedHead = this.tableHead.filter((item) => {
  return item.isfixed
  });
  this.nomalHead = this.tableHead.filter((item) => {
  return !item.isfixed
  });
  this.initSize();
  },
  initSize() {
  let fwid = 0; let nwid = 0;
  this.fixedHead.forEach((item) => {
  // 此处以px单位为例
  const len = item.width.length - 2;
  const width = item.width.substring(0, len) - 0;
  fwid += width;
  });
  this.nomalHead.forEach((item) => {
  const len = item.width.length - 2;
  const width = item.width.substring(0, len) - 0;
  nwid += width;
  });
  this.fixedWid = fwid + 'px';
  this.nomalWid = nwid + 'px';
  }
  }

  三、列表滚动联动:

  除左上角元素外,其余三个元素均有联动滚动效果,增加滚动监听事件@scroll。

  <div class="nomalHeadBox"
  :style="{width: 'calc(100% - '+fixedWid+')'}">
  <div ref="nomalHeadBox" @scroll="scrollHList">
  ......
  </div>
  </div>
  <div class="fixedListBox" :style="{width: fixedWid}">
  <div ref="fixedListBox" @scroll="scrollFList">
  ......
  </div>
  </div>
  <div class="nomalListBox" ref="nomalListBox"
  @scroll="scrollList"
  :style="{width: 'calc(100% - '+fixedWid+')'}">
  ......
  </div>


  methods: {
  scrollHList() {
  this.$refs.nomalListBox.scrollLeft =
  this.$refs.nomalHeadBox.scrollLeft;
  },
  scrollFList() {
  this.$refs.nomalListBox.scrollTop =
  this.$refs.fixedListBox.scrollTop;
  },
  scrollList() {
  this.$refs.fixedListBox.scrollTop =
  this.$refs.nomalListBox.scrollTop;
  this.$refs.nomalHeadBox.scrollLeft =
  this.$refs.nomalListBox.scrollLeft;
  }
  }

  四、去除头部、左侧列表滚动标签的滚动条:

  .nomalHeadBox {
  >div {
  overflow: auto;
  height: calc(100% + 10px);
  }
  }
  .fixedListBox{
  >div {
  overflow: auto;
  height: 100%;
  width: calc(100% + 10px);
  }
  }

        以上是全部内容,请大家多多关注,后续更多精彩内容。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/127699.html

相关文章

  • jsu系之表格组件 ---- jsu.Table

    摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...

    soasme 评论0 收藏0
  • jsu系之表格组件 ---- jsu.Table

    摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...

    everfly 评论0 收藏0
  • jsu系之表格组件 ---- jsu.Table

    摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...

    张巨伟 评论0 收藏0
  • 我是如何做固定头部(thead)的

    摘要:我希望就用一个,尽可能的减少辅助节点,把这个事情搞定模拟我们尝试给加上,再指定,然后这个就脱离的文档流,固定在页面顶部显示了,还好,所有支持的浏览器都表现一致,就连也生效了。但是,使用或后,原本所占的高度就没有了,因为脱离了文档流。 在前端开发中经常遇到需要页面滚动时,固定某个区域显示,常见表格的需求,因为表格有很多列,如果列名不固定在顶部显示,滚动到底部时,可能就不知道某些列对应的是...

    crossea 评论0 收藏0
  • 网页版模仿Excel

    摘要:鼠标按下拖拽多选单元格这个是本唯一的亮点了个人认为。这样做的结果是页面非常卡,因为鼠标移动过程会多次触发鼠标移动事件,会多次进行单元格元素循环遍历。 网页版模仿Excel 最近公司闲的dan疼,非要模仿Excel做一个网页版的Excel,刚开始听说要做这么一个东西的时候瞬间觉得公司领导高(sang)瞻(xin)远(bing)瞩(kuang),只能头铁的接下了,那就开始干。其实主要目的是...

    james 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<