效果
思路
瀑布流其实就是将放放商品信息列表展示的view分为了左右两个部分,然后固定了两个部分的宽度,高度不用管,这样就会有错位的感觉了。既然分为了左右两个容器来显示,那我们的商品信息列表,也得分出两个,一个列表内容用于左边的容器显示,一个用于右边容器显示即可。
实现
先将列表分为两个
// 总商品数据列表
var goodList = ref([])
// 左侧数据列表
var LeftList = ref([])
// 右侧数据列表
var RightList = ref([])
// 将商品信息列表分为左侧右侧两个部分
for (let i = 0; i < resp.results.length; i++) {
if (i % 2 === 0) {
LeftList.value.push(resp.results[i])
} else {
RightList.value.push(resp.results[i])
}
}
HTML中使用左右列表进行显示
<view class="waterfall">
<view class="wt-left wt-list">
<view class="wt-item" v-for="(good,index) in LeftList" :key="index" @click="ToDetail(good.id)">
<view class="item-img">
<image :src="good.cover_image" mode="widthFix"></image>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{good.good_name}}</text>
<view class="tags-box">
<text>点击量:{{good.click_num}}</text>
<text>收藏量:{{good.fav_num}}</text>
</view>
</view>
</view>
</view>
<view class="vt-right wt-list">
<view class="wt-item" v-for="(good,index) in RightList" :key="index" @click="ToDetail(good.id)">
<view class="item-img">
<image :src="good.cover_image" mode="widthFix"></image>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{good.good_name}}</text>
<view class="tags-box">
<text>点击量:{{good.click_num}}</text>
<text>收藏量:{{good.fav_num}}</text>
</view>
</view>
</view>
</view>
</view>
完整代码
<template>
<view class="waterfall">
<view class="wt-left wt-list">
<view class="wt-item" v-for="(good,index) in LeftList" :key="index" @click="ToDetail(good.id)">
<view class="item-img">
<image :src="good.image" mode='widthFix'></image>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{good.name}}</text>
<view class="tags-box">
<text>点击量:{{good.click_num}}</text>
<text>收藏量:{{good.fav_num}}</text>
</view>
</view>
</view>
</view>
<view class="vt-right wt-list">
<view class="wt-item" v-for="(good,index) in RightList" :key="index" @click="ToDetail(good.id)">
<view class="item-img">
<image :src="good.image" mode='widthFix'></image>
</view>
<!-- 介绍部分 -->
<view class="introduce-section">
<text class="title">{{good.name}}</text>
<view class="tags-box">
<text>点击量:{{good.click_num}}</text>
<text>收藏量:{{good.fav_num}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
// 总商品数据列表
var goodList = ref([{
"id": 1,
"name": "商品一",
"image": "https://li-xun.work:8001/media/goods/images/%E4%B8%9B%E7%9F%A5%E4%BC%A0%E5%AA%92.png",
"click_num": 22,
"fav_num": 33
}, {
"id": 2,
"name": "商品二",
"image": "https://li-xun.work:8001/media/goods/images/%E4%BF%A1%E6%81%AF.png",
"click_num": 22,
"fav_num": 33
}, {
"id": 3,
"name": "商品三",
"image": "https://li-xun.work:8001/media/goods/images/%E6%9A%97%E6%9D%A0_8aGwy5q.jpg",
"click_num": 888,
"fav_num": 888
}, {
"id": 4,
"name": "商品四",
"image": "https://tse1-mm.cn.bing.net/th/id/OIP-C.MvBGMoOpeauMHajCOjdKvQHaJQ?pid=ImgDet&rs=1",
"click_num": 888,
"fav_num": 888
},
{
"id": 5,
"name": "商品五",
"image": "https://li-xun.work:8001/media/goods/images/icon.png",
"click_num": 888,
"fav_num": 888
},
{
"id": 6,
"name": "商品六",
"image": "https://li-xun.work:8001/media/goods/images/%E4%B8%9B%E7%9F%A5%E4%BC%A0%E5%AA%92.png",
"click_num": 22,
"fav_num": 33
}
])
// 左侧数据列表
var LeftList = ref([])
// 右侧数据列表
var RightList = ref([])
// 将商品信息列表分为左侧右侧两个部分
for (let i = 0; i < goodList.value.length; i++) {
if (i % 2 === 0) {
LeftList.value.push(goodList.value[i])
} else {
RightList.value.push(goodList.value[i])
}
}
// 点击商品 跳转详情
function ToDetail(id) {
console.log("点击了商品", id)
}
</script>
<style>
.waterfall {
display: flex;
flex-direction: row;
width: 740rpx;
justify-content: center;
overflow: hidden;
margin-left: 10rpx;
}
.wt-list {
width: 360rpx;
display: flex;
flex-direction: column;
margin-right: 10rpx;
}
.wt-item {
margin-bottom: 15rpx;
background-color: #ffffff;
}
.item-img image {
width: 100%;
}
/* 商品介绍 */
.introduce-section {
background: #ffffff;
padding: 20rpx 30rpx;
}
.introduce-section .title {
font-size: 32rpx;
color: #303133;
height: 50rpx;
line-height: 50rpx;
}
.introduce-section .tags-box {
display: flex;
align-items: center;
height: 30rpx;
font-size: 24rpx;
color: #909399;
}
</style>
效果展示:
以上,自己写一个瀑布流的记录