瀑布流
兼容小程序 ,h5 ,app
直接上代码
html代码
<template>
<view class="goods-wrapper">
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="goods-item" v-for="(item, index) in leftList" :key="index">
<u-lazy-load threshold="-450" :image="item.image" :index="index"></u-lazy-load>
<viem class="goods-info">
<text class="goods-name">2021 名师经典题</text>
<text class="goods-desc">作业帮</text>
<view class="goods-price">
<text class="current-price"><text class="yen">¥</text>234</text>
<text class="original-price"><text class="yen">¥</text>590</text>
</view>
</viem>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="goods-item" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="-450" :image="item.image" :index="index"></u-lazy-load>
<viem class="goods-info">
<text class="goods-name">2021 名师经典题</text>
<text class="goods-desc">作业帮</text>
<view class="goods-price">
<text class="current-price"><text class="yen">¥</text>234</text>
<text class="original-price"><text class="yen">¥</text>590</text>
</view>
</viem>
</view>
</template>
</u-waterfall>
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
</view>
</template>
js 代码
<script>
export default {
data() {
return {
loadStatus: 'loadmore',
flowList: [],
list: [{
price: 35,
title: '北国风光,千里冰封,万里雪飘',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
},
{
price: 75,
title: '望长城内外,惟余莽莽',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
},
{
price: 385,
title: '大河上下,顿失滔滔',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
},
{
price: 784,
title: '欲与天公试比高',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
}
]
}
},
onLoad() {
this.addRandomData();
},
onReachBottom() {
this.loadStatus = 'loading';
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000)
},
methods: {
addRandomData() {
for (let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
let item = JSON.parse(JSON.stringify(this.list[index]))
item.id = this.$u.guid();
this.flowList.push(item);
}
}
}
}
</script>
scss代码
<style scoped lang="scss">
.goods-wrapper {
background: #f7f7f7;
}
.goods-item {
display: flex;
margin: 26rpx;
flex-direction: column;
background: #fff;
border-radius: 16rpx;
overflow: hidden;
.goods-info {
display: flex;
flex-direction: column;
padding: 20rpx;
}
.goods-name {
margin: 20rpx 0;
font-size: 28rpx;
font-weight: bold;
}
.goods-desc {
font-size: 24rpx;
color: #808080;
margin-bottom: 30rpx;
}
.goods-price {
display: flex;
.yen {
font-size: 20rpx;
}
.current-price {
color: #FF526A;
}
.original-price {
margin-left: 30rpx;
color: #B3B3B3;
text-decoration: line-through;
}
}
}
</style>
这里是效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/45dca32fad9199b641e2776b697da7fb.png#pic_center)