前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall， 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13046
效果图如下：
使用方法
<!-- proList: 条目数组数据 goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->
<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>
HTML代码部分
<template>
<view class="content">
<!-- proList: 条目数组数据 goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->
<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>
</view>
</template>
JS代码 （引入组件 填充数据）
<script>
import ccWaterListView from '../../components/ccList/ccWaterListView.vue';
export default {
components: {
ccWaterListView,
},
data() {
return {
// 列表数组
projectList: []
}
},
mounted() {
this.requestData();
},
methods: {
// 列表条目点击事件
goProDetail(item) {
console.log("条目数据 = " + JSON.stringify(item));
uni.showModal({
title:'选择条目',
content:'选择条目数据 = ' + JSON.stringify(item)
})
},
requestData() {
// 模拟请求参数设置
let reqData = {
'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
// 模拟请求接口
this.totalNum = 39;
this.projectList = [];
let imgArr = ['https://images.pexels.com/photos/7214784/pexels-photo-7214784.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://cdn.pixabay.com/photo/2014/07/08/14/14/resolution-387446_1280.jpg',
'https://images.pexels.com/photos/5202162/pexels-photo-5202162.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/4967533/pexels-photo-4967533.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/8679339/pexels-photo-8679339.jpeg?auto=compress&cs=tinysrgb&w=800',
'https://images.pexels.com/photos/209339/pexels-photo-209339.jpeg?auto=compress&cs=tinysrgb&w=800']
let nameArr = ['冰糖心苹果 红富士大果出售 应季水果 繁荣种植园','农鲜洛川红富士苹果16枚，单果160g,新鲜饱满水分充足','甜醉了 烟台苹果栖霞红富士新鲜水...','惠寻 山东烟台红富士苹果12枚 果径...']
for (let i = 0; i < 20; i++) {
this.projectList.push({
'proImg': imgArr[i%6],
'proName': nameArr[i%4],
'proDetail': '我是产品详情' + i,
'proPrice': 60 + 6 * i + '元',
'status': (i % 3 == 0)?'618':'',
'id': i + ''
});
}
}
}
}
</script>
CSS
<style>
page {
background-color: #f7f7f7;
}
.content {
display: flex;
flex-direction: column;
}
</style>