vue form表单封装,vue虚拟列表组件
这篇文章主要介绍了某视频剪辑软件实现虚拟化列表封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue虚拟化列表封装将下面代码复制一份到自己的项目中某视频剪辑软件虚拟列表-虚拟滚动列表使用场景安装使用
vue虚拟化列表封装
将下面代码复制一份到自己的项目中
模板
div class= scroll parent ref= scroll content @ scroll= handle scroll
div :style=blankFillStyle
div v-for=item，index in show datalist :key= index
slot :everyVirtual=item/slot
/div
/div
/div
/模板
脚本
导出默认值{
道具：[oneHeight ， virtualList]，
data () {
返回{
内容大小：,//可视区域可以展示多少条数据
startIndex:0，//记录当前滚动的第一个元素的索引
currentScroll:0，//记录当前滚动的距离
}
},
方法：{
//获取可视区域可以展示多少条
getContentSize(){
//两次取反可以获取到整数部分
this.contentSize=~~(this .$参考文献。滚动内容。偏移高度/this。一个高度)2；
},
//监听滚动条
handleScroll(){
//持续滚动减少变量重新赋值优化处理只有在到下一个元素节点的时候才会重新给this.statrIndex赋值避免和this.startIndex相关联的数据再次计算
this.currentScroll=this .$参考文献。滚动内容。滚动顶部；
让currentIndex=~~(这个参考文献。滚动内容。滚动顶部/这个。一个身高)；
如果(这个。startindex==当前索引){
返回
}
this.startIndex=currentIndex
如果((这个。startindex this。contentsize-1)这个。虚拟列表。长度-1){//说明到达底部了
这个发出( scrollEnd )
}
}
},
已激活(){
这个. nextTick(()={
这个参考文献。滚动内容。向上滚动=这个。水流翻滚；
})
},
计算值：{
endIndex(){ //获取最后一个元素的索引
设endIndex=this。startindex this。contentsize * 2；
如果(end index this。虚拟列表。长度-1){
结束索引=this。虚拟列表。长度-1
}
返回endIndex
},
showDataList(){
设startIndex=0；
如果(这个。startindex=this。contentsize){
startIndex=0；
}否则{
startIndex=this。startIndex-这个。contentsize
}
返回这个。虚拟列表。slice(startIndex，这个。end index)；
},
blankFillStyle(){
设startIndex=0；
如果(这个。startindex=this。contentsize){
startIndex=0；
}否则{
startIndex=this。startIndex-这个。contentsize
}
返回{
填充顶部：startIndex * this。一个高度像素，
垫底：(这个。虚拟列表。长度-这个。结束索引)*这个。一个高度像素
}
}
},
已安装(){
窗户。onresize=this。获取contentsize()；
窗户。方位变化=这个。获取contentsize()；
}
}
/脚本
样式范围。scrollParent{
身高：100%;
宽度：100%;
溢出-y:自动；
}
/风格
vue虚拟列表-vue-virtual-scroll-list
使用场景
因为公司做了类似于百度网盘的竞品，所以用户如果上传了很多的文件，就会造成页面数字正射影像图元素的过多，然后因为需要操作数字正射影像图元素，所以页面会变得很卡。所以用虚拟列表来解决。
安装
安装的话这个插件有2个版本的，一个是一版本，目前更新到2版本了，二版本功能更加的强大。这里使用了一版本，通俗易懂一点。
新公共管理安装-保存vue-虚拟-滚动-列表@1.1.3
使用
在单页面中导入
从"虚拟滚动列表"导入虚拟列表；
组件：{
虚拟列表，//注册组件
},
div class=content-timeview_box
！-尺寸代表行高留下代表一次渲染的数量-
！-问题：1。在时间视图中(文件夹视图中只有一个VirtualList不受影响)，一个日期代表一个VirtualList如何解决身高问题？-
！-如果高度统一呢？当一个日期中的文件数小于高度时，VirtualList-之间会有空格
！-每个VirtualList的高度应该根据日期下的文件数量动态绑定-
虚拟主义者
:size=40
:remain=17
:wclass=vuesrollboxviewClass
:tobottom=toBottom
style=padding: 0 32px 0 32px
:style= { height:item big . items . length 6？scrollbarheight:200px}
ToBottom的方法，这个地方很坑，因为我只能在1.1.3版本触发这个方法，没有成功触发1版本的其他版本号，所以应该还是个高度的问题。Tobom:滚动到底部时触发，请求下一组数据//滚动到底部时触发。
//注意：该方法在1.0版本中不兼容，只能在官方文档的1.1.3版本中使用。
//@1.1.3
toBottom() {
this . infinite handler()；
},
:wclass="vuesrollboxviewClass "
Wclass是用户定义的类。我这里的业务场景不是每行只有一个数据，从上到下排列，而是每行按照不同的分辨率显示五六个，所以我们一次要计算渲染的数量，需要动态绑定。
小结：还是需要更熟练的掌握原生JS。虽然有各种框架插件来解决问题，但是当业务场景更加复杂的时候呢？所以还是要掌握原生JS，有能力自己写轮子。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。