前端vue仿京東天貓簡(jiǎn)單好用的瀑布流瀑布流式布局列表組件waterfall， 閱讀全文下載完整代碼請(qǐng)關(guān)注微信公眾號(hào)： 前端組件開(kāi)發(fā)
效果圖如下：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-483225.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-483225.html
使用方法
<!-- proList: 條目數(shù)組數(shù)據(jù) goProDetail:條目點(diǎn)擊事件跳轉(zhuǎn)（實(shí)現(xiàn)了點(diǎn)擊條目數(shù)據(jù)傳值）-->
<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>
HTML代碼部分
<template>
<view class="content">
<!-- proList: 條目數(shù)組數(shù)據(jù) goProDetail:條目點(diǎn)擊事件跳轉(zhuǎn)（實(shí)現(xiàn)了點(diǎn)擊條目數(shù)據(jù)傳值）-->
<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>
</view>
</template>
JS代碼 （引入組件 填充數(shù)據(jù)）
<script>
import ccWaterListView from '../../components/ccList/ccWaterListView.vue';
export default {
components: {
ccWaterListView,
},
data() {
return {
// 列表數(shù)組
projectList: []
}
},
mounted() {
this.requestData();
},
methods: {
// 列表?xiàng)l目點(diǎn)擊事件
goProDetail(item) {
console.log("條目數(shù)據(jù) = " + JSON.stringify(item));
uni.showModal({
title:'選擇條目',
content:'選擇條目數(shù)據(jù) = ' + JSON.stringify(item)
})
},
requestData() {
// 模擬請(qǐng)求參數(shù)設(shè)置
let reqData = {
'area': '',
"pageSize": 10,
"pageNo": this.curPageNum
}
// 模擬請(qǐng)求接口
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 = ['冰糖心蘋果 紅富士大果出售 應(yīng)季水果 繁榮種植園','農(nóng)鮮洛川紅富士蘋果16枚，單果160g,新鮮飽滿水分充足','甜醉了 煙臺(tái)蘋果棲霞紅富士新鮮水...','惠尋 山東煙臺(tái)紅富士蘋果12枚 果徑...']
for (let i = 0; i < 20; i++) {
this.projectList.push({
'proImg': imgArr[i%6],
'proName': nameArr[i%4],
'proDetail': '我是產(chǎn)品詳情' + 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>
到了這里，關(guān)于前端vue仿京東天貓簡(jiǎn)單好用的瀑布流瀑布流式布局列表組件waterfall的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
