前端vue仿京東天貓簡單好用的瀑布流瀑布流式布局串列組件waterfall， 下載完整代碼請訪問uni-app插件市場址:https://ext.dcloud.net.cn/plugin?id=13046
效果圖如下：
使用方法
<!-- proList: 條目陣列資料 goProDetail:條目點擊事件跳轉（實作了點擊條目資料傳值）-->
<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>
HTML代碼部分
<template>
<view >
<!-- 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 = https://www.cnblogs.com/ccVue/archive/2023/06/15/{'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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555287.html
標籤：其他
上一篇：解決：js 根據圖片鏈接（image url）下載，有的打開預覽，有的下載
下一篇：返回列表