最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

Vue瀑布流插件的使用示例

来源:懂视网 责编:小采 时间:2020-11-27 22:07:19
文档

Vue瀑布流插件的使用示例

Vue瀑布流插件的使用示例:我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度。 测试页面:Page.vue 模板页面:WaterFollow.vue 和 WFColumn.vue 在Page.vue中,修改itemW的值,设置每列的最小宽度。例如:itemW=200(意为200px)。list为数
推荐度:
导读Vue瀑布流插件的使用示例:我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度。 测试页面:Page.vue 模板页面:WaterFollow.vue 和 WFColumn.vue 在Page.vue中,修改itemW的值,设置每列的最小宽度。例如:itemW=200(意为200px)。list为数

我自己写的一个的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>

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

Vue瀑布流插件的使用示例

Vue瀑布流插件的使用示例:我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度。 测试页面:Page.vue 模板页面:WaterFollow.vue 和 WFColumn.vue 在Page.vue中,修改itemW的值,设置每列的最小宽度。例如:itemW=200(意为200px)。list为数
推荐度:
标签: 使用 VUE 插件
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top