vue长列表虚拟滚动,vue列表循环滚动插件
这篇文章主要为大家详细介绍了某视频剪辑软件实现列表固定列滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
功能介绍：大致需求：整体思路：具体实现：一、显示屏：柔性布局，分为四组容器布局：二、列表头部、内部数据绑定：三、列表滚动联动：四、去除头部、左侧列表滚动标签的滚动条：vue scss移动端列表固定列滚动，供大家参考，具体内容如下
功能介绍：
在移动端开发中，会用到列表作为信息展示方式，一般希望上下滚动时，可以固定表头，左右滚动时，可以固定最左列。
大致需求：
1、列表可以使用数组循环遍历；
2、上下滚动时，可以固定表头在最顶端显示；
3、左右滚动时，可以固定左边一列或多列可以固定显示；
4、列表的列宽允许在数组中设置；
整体思路：
1、页面使用四个月初(月初的缩写)元素分别存储四种元素：
1)固定在左上角，完全不参与滚动表头元素；
2)固定在顶部，只允许左右滚动表头元素；
3)固定在左侧，只允许上下滚动列元素；
4)右下角，左右上下均可随意滚动列元素；
2、表头数组与列表数据数组之间互相联系，表头属性可以控制列表列排序、列表宽度、是否为固定列等；
3、四个数字正射影像图之间增加联动，使用@scroll、scrollLeft、scrollTop
具体实现：
一、display:flex布局，分为四组容器布局：
！-宽度增加动态设置-
div class=box
div class=table-box
div class=固定压头箱
:style= { width:fixed wide } /div
div class=nomalHeadBox
style= { width: calc(100%-固定宽度) }
/div
div class=fixedListBox
:style= { width:fixed wide } /div
div class=nomalListBox
:style= { width: calc(100%-固定宽度) }
/div
/div
/div
/div
导出默认值{
data() {
返回{
固定id:" "
};
}
}。方框{
宽度：100vw身高：100vh
框大小：边框-框；
填充：5vh 5vw
背景：# 000;
}
$ head hei:40px；表格盒{
宽度：100%;身高：100%;
显示器：flex
柔性包装：缠绕；
溢出：隐藏；固定式流浆箱{
背景：粉色；
身高：$ headHei
}。nomalHeadBox {
背景：黄色；
身高：$ headHei
溢出：隐藏；
}。fixedListBox{
身高：calc(100%-# { $ head hei })；
背景：浅蓝色；
溢出：隐藏；
}。nomalListBox {
背景：# fff
身高：calc(100%-# { $ head hei })；
溢出：自动；
}
}
二、列表头部、内部数据绑定：
应用到迭代遍历表头、列表数据，并计算列表宽度：
div class= fixed head box :style= { width:fixed wide }
保险商实验所
li v-for=(item，index) in fixedHead :key=index
:style={width: item.width}
{{item.name}}
/李
/ul
/div
div class=nomalHeadBox
:style= { width: calc(100%-固定宽度) }
div ref=nomalHeadBox
ul :style={width: nomalWid}
li v-for=(item，index) in nomalHead
:key=“index”:style=“{ width:item。宽度}
{{item.name}}
/李
/ul
/div
/div
div class=固定列表框:style= { width:fixed wide }
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]}}
/李
/ul
/div
/div
div class= nomalListBox ref= nomalListBox
:style= { width: calc(100%-固定宽度) }
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]}}
/李
/ul
/div
data() {
返回{
tableHead: [
{名称： ,属性： a ，宽度： 100像素，固定值：true }，
{名称： ,属性： b ，宽度： 80px }，
{名称： ,属性： c ，宽度： 80px }，
{名称： ,属性： d ，宽度： 100像素 },
{名称： ,属性： e ，宽度： 100像素 },
{名称： ,属性： f ，宽度： 100像素 },
{名称： ,属性： g ，宽度： 120像素 }
],
列表：[
{ a: ，b: ，c: ，d: ，e: ，f: ，g: }
],
fixedHead: []，
nomalHead: []，
固定id: ，
nomalWid:" "
};
},
已安装(){
这个。initdata()；
},
方法：{
initData() {
这个。固定头=这个。桌头。过滤器((项目)={
返回项目。是固定的
});
这个。nomalhead=这个。桌面。过滤器((项目)={
回归！项目。存在已修复
});
这个。initsize()；
},
initSize() {
设fwid=0；设nwid=0；
这个。固定头。foreach((item)={
//此处以像素单位为例
const len=项目。宽度。长度-2；
常数宽度=项目。宽度。子串(0，len)-0；
fwid=宽度；
});
这个。诺曼黑德。foreach((item)={
const len=项目。宽度。长度-2；
常数宽度=项目。宽度。子串(0，len)-0；
nwid=宽度；
});
this.fixedWid=fwid px
this.nomalWid=nwid px
}
}
三、列表滚动联动：
除左上角元素外，其余三个元素均有联动滚动效果，增加滚动监听事件@卷轴。
div class=nomalHeadBox
:style= { width: calc(100%-固定宽度) }
div ref=普通压头箱 @ scroll= scroll hlist
.
/div
/div
div class=固定列表框:style= { width:fixed wide }
div ref=固定列表框 @ scroll= scroll flist
.
/div
/div
div class= nomalListBox ref= nomalListBox
@scroll=scrollList
:style= { width: calc(100%-固定宽度) }
.
/div
方法：{
scrollHList() {
这个refs.nomalListBox.scrollLeft=
这个参考文献。普通流浆箱。向左滚动；
},
scrollFList() {
这个. refs.nomalListBox.scrollTop=
这个参考文献。固定列表框。滚动顶部；
},
scrollList() {
这个refs.fixedListBox.scrollTop=
这个参考文献。nomallistbox。滚动顶部；
这个. refs.nomalHeadBox.scrollLeft=
这个参考文献。nomallistbox。向左滚动；
}
}
四、去除头部、左侧列表滚动标签的滚动条：
。nomalHeadBox {
部门{
溢出：自动；
高度：calc(100% 10px)；
}
}。fixedListBox{
部门{
溢出：自动；
身高：100%;
宽度：calc(100% 10px)；
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。