vue项目引入vue-virtual-scroller及使用
·
1.官网git地址:vue-virtual-scroller
参考文章:https://www.jb51.net/article/175580.htm
2.引入:
1)项目使用全局组件:
1.npm
install
-D vue-virtual-scroller
2.在package.json引入:
"vue-virtual-scroller": "1.0.10"
3.在man.js引入:
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import VueVirtualScroller from "vue-virtual-scroller";
Vue.use(VueVirtualScroller);
4.在vue中使用:
<template>
<div>
<RecycleScroller
class="scroller"
:items="items"
:item-size="32">
<template slot-scope="props">
<li :key="props.itemKey">{{props.item.name}}</li>
</template>
</RecycleScroller>
</div>
</template>
export default {
name:'test',
data () {
return {
items:[
{
"id": "601919b2d2e8a87934751e85",
"age": 27,
"name": "Maldonado Puckett1",
"company": "LEXICONDO"
},
{
"id": "601919b2d2e8a87934751e856",
"age": 27,
"name": "Maldonado Puckett",
"company": "LEXICONDO"
},
{
"id": "601919b2d2e8a87934751e855",
"age": 27,
"name": "Maldonado 222",
"company": "LEXICONDO"
},
{
"id": "601919b2d2e8a87934751e854",
"age": 27,
"name": "Maldonado 33",
"company": "LEXICONDO"
},
{
"id": "601919b2d2e8a87934751e853",
"age": 27,
"name": "Maldonado 44",
"company": "LEXICONDO"
},
{
"id": "601919b2d2e8a87934751e852",
"age": 27,
"name": "Maldonado 55",
"company": "LEXICONDO"
}
]
};
},
mounted() {},
methods: {}
}
<style lang='css' scoped>
.scroller {
height: 100%;
}
.user {
height: 32%;
padding: 0 12px;
display: flex;
align-items: center;
}
</style>
5.效果展示:
更多推荐
已为社区贡献3条内容
所有评论(0)