Vue瀑布流插件的使用示例
2019/6/27 7:41:40
本文主要是介绍Vue瀑布流插件的使用示例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度。
测试页面:Page.vue
模板页面:WaterFollow.vue 和 WFColumn.vue
在Page.vue中,修改itemW的值,设置每列的最小宽度。例如:itemW="200"(意为200px)。list为数组。高度不用设置,:style="{height:item+'px'}"是我为了创造卡片高度加上去的,不加就显示卡片的原来大小。
经测试,created加载数据正常,mounted加载、更新数据正常。
Page.vue
<template> <div class="container"> <w-f-column itemW="200"> <template slot-scope="{columnNum,columnIndex}"> <water-follow :list="list" :columnNum="columnNum" :columnIndex="columnIndex"> <template slot-scope="{item,index}"> <div class="my-box" :style="{height:item+'px'}">{{item}}-{{index}}</div> </template> </water-follow> </template> </w-f-column> </div> </template> <script> import WFColumn from '../waterFollow/WFColumn' import WaterFollow from '../waterFollow/WaterFollow' export default { name: 'page', components: {WaterFollow, WFColumn}, data () { return { list: [] } }, created () { // 有初始数据 for (let i = 0; i < 50; i++) { this.list.push(Math.floor(Math.random() * 301 + 200)) } }, mounted () { // 模拟网络请求 // window.setTimeout(() => { // this.list = [] // for (let i = 0; i < 50; i++) { // this.list.push(Math.floor(Math.random() * 301 + 200)) // } // }, 1000) // -- 分割 -- // 模拟数据不断变化 // window.setInterval(() => { // this.list = [] // for (let i = 0; i < 50; i++) { // this.list.push(Math.floor(Math.random() * 301 + 200)) // } // }, 1000) } } </script> <style scoped lang="scss"> .container{ width: 100%; background: gray; .my-box{ width: 200px; background: #000; margin-bottom: 20px; color: #fff; } } </style>
WFColumn.vue
<template> <div class="wf-container"> <div class="wf-column" v-for="(item,index) in columnNum" :key="'column-'+index" :name="index"> <slot :columnNum="columnNum" :columnIndex="index"></slot> </div> </div> </template> <script> export default { name: 'WFColumn', props: ['itemW'], data () { return { columnNum: 0 } }, created () { this.columnNum = Math.floor(document.body.clientWidth / this.itemW) window.onresize = () => { this.columnNum = Math.floor(document.body.clientWidth / this.itemW) } } } </script> <style scoped lang="scss"> .wf-container{ width: 100%; display: flex; .wf-column{ flex: 1; } } </style>
WaterFollow.vue
<template> <div> <div v-for="(item,index) in list" :key="'item-'+index" class="item" :id="'card-'+columnIndex+'-'+index" v-if="load?(record[index].index===columnIndex):true"> <slot :item="item" :index="index"></slot> </div> </div> </template> <script> export default { name: 'WaterFollow', props: ['list', 'columnNum', 'columnIndex'], data () { return { column: 0, record: [], load: false, update: false } }, methods: { calculateColumn () { let cList = [] for (let i = 0; i < this.columnNum; i++) { cList.push(0) } for (let i = 0; i < this.record.length; i++) { let index = 0 for (let j = 0; j < cList.length; j++) { if (cList[index] > cList[j]) { index = j } } cList[index] += this.record[i].height this.record[i].index = index } }, recordInit () { for (let i = 0; i < this.list.length; i++) { this.record.push({index: -1, height: -1}) } }, initHeightData () { for (let i = 0; i < this.list.length; i++) { if (document.getElementById('card-' + this.columnIndex + '-' + i)) { let h = document.getElementById('card-' + this.columnIndex + '-' + i).offsetHeight this.record[i].height = h } } } }, beforeCreate () {}, created () { this.load = false this.recordInit() }, beforeMount () {}, mounted () { this.initHeightData() this.calculateColumn() this.load = true }, beforeUpdate () {}, updated () { if (this.update) { this.initHeightData() this.calculateColumn() this.update = false this.load = true } }, beforeDestroy () {}, destroyed () {}, watch: { columnNum (curr, old) { this.calculateColumn() }, list (curr, old) { console.log('list change') this.recordInit() this.load = false this.update = true } } } </script> <style scoped> </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于Vue瀑布流插件的使用示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南