想要在移动端中实现列表固定列固定样式,可以用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.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...
摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...
摘要:作者注是基于扩展的原生表格插件,设计理念来源于的组件该库基于,暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路,欢迎讨论和指正。 作者注:jsu.Table是基于jQuery扩展的原生表格插件,设计理念来源于Element.ui的Table组件(该UI库基于vue.js,暂时未找到jQuery版本因此在此造轮子)。本文将记录jsu系列所有组件开发过程...
摘要:我希望就用一个,尽可能的减少辅助节点,把这个事情搞定模拟我们尝试给加上,再指定,然后这个就脱离的文档流,固定在页面顶部显示了,还好,所有支持的浏览器都表现一致,就连也生效了。但是,使用或后,原本所占的高度就没有了,因为脱离了文档流。 在前端开发中经常遇到需要页面滚动时,固定某个区域显示,常见表格的需求,因为表格有很多列,如果列名不固定在顶部显示,滚动到底部时,可能就不知道某些列对应的是...
摘要:鼠标按下拖拽多选单元格这个是本唯一的亮点了个人认为。这样做的结果是页面非常卡,因为鼠标移动过程会多次触发鼠标移动事件,会多次进行单元格元素循环遍历。 网页版模仿Excel 最近公司闲的dan疼,非要模仿Excel做一个网页版的Excel,刚开始听说要做这么一个东西的时候瞬间觉得公司领导高(sang)瞻(xin)远(bing)瞩(kuang),只能头铁的接下了,那就开始干。其实主要目的是...
阅读 507·2023-03-27 18:33
阅读 709·2023-03-26 17:27
阅读 607·2023-03-26 17:14
阅读 580·2023-03-17 21:13
阅读 505·2023-03-17 08:28
阅读 1757·2023-02-27 22:32
阅读 1265·2023-02-27 22:27
阅读 2107·2023-01-20 08:28