更新记录
1.0.0(2020-06-10) 下载此版本
- 首次发布
平台兼容性
根据图片比例计算实现的简单瀑布流
使用方法
<!-- 瀑布流 -->
<template>
<view class="page">
<my-waterfall :value="listData"></my-waterfall>
</view>
</template>
<script>
export default {
data() {
return {
listData:[]
}
},
onLoad() {
setTimeout(() => {
this.listData=[{
id:1,
image:'../../static/test/goods1.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
},{
id:2,
image:'../../static/test/goods2.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
},{
id:3,
image:'../../static/test/goods8.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
},{
id:4,
image:'../../static/test/goods7.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
},{
id:5,
image:'../../static/test/goods6.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
},{
id:6,
image:'../../static/test/goods5.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
},{
id:7,
image:'../../static/test/goods4.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
},{
id:8,
image:'../../static/test/goods3.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
},{
id:9,
image:'../../static/test/goods2.jpg',
imageWidth:800,
imageHeight:800,
title:'衣服',
price:66.99,
original:79.99
}];
}, 500)
},
methods: {
}
}
</script>
<style scoped>
</style>