最终效果：

整体内容比较简单，参考了一篇瀑布流文章和一篇商品详情文章随便修改整了下，主要是给想做这方便面的新人一个简单逻辑的展示（其实我也是第一次写这个emmm）

一.组件下载：

uni-icon

uni-goods-nav

二.先写一个基础页面：

图片是百度随便找的，如果访问不了了随便换几张就行了

这是p1的界面代码，

<template><view class="content"><view class="list" v-for="(item, index) in itemList" :key="item.id" @click="gopreview(item.id)"><image mode="widthFix" :src="item.img"></image><view class="title">{{ item.title }}</view><view class="con">{{ item.synopsis }}</view><view class="con_one"><view class="con_one_one">￥{{ item.price }}</view><view class="con_one_two"><s>￥{{ item.original_price }}</s></view></view></view></view>
</template><script setup>import {ref} from 'vue'const itemList=[{img: 'https://file03.16sucai.com/2017/1100/16sucai_p566c071_307.JPG',title: '松仁巧克力',content: '好像是坏越最喜欢的巧克力？听说产生在那个山的那边海的那边的都是省速度市，甜美的青山水和令人陶醉的可可',price:'2',original_price:'6',id:'1',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'},{img: 'https://img1.baidu.com/it/u=4169556851,3455102274&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',title: '德芙巧克力',content: '传说中最物美价廉的巧克力，听说产生在那个山的那边海的那边的都是省速度市，甜美的青山水和令人陶醉的可可',price:'1',original_price:'7',id:'2',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'},{img: 'https://img0.baidu.com/it/u=1135608079,1041890161&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',title: '白巧克力',content: '这巧克力真白~听说产生在那个山的那边海的那边的都是省速度市，甜美的青山水和令人陶醉的可可',price:'3',original_price:'8',id:'3',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'},{img: 'https://img1.baidu.com/it/u=2795270876,536929854&fm=253&fmt=auto&app=138&f=JPEG?w=603&h=385',title: '快乐巧克力',content: '吃了会很开心。嘻嘻嘻，听说产生在那个山的那边海的那边的都是省速度市，甜美的青山水和令人陶醉的可可',price:'2',original_price:'9',id:'4',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'},{img: 'https://img1.baidu.com/it/u=2795270876,536929854&fm=253&fmt=auto&app=138&f=JPEG?w=603&h=385',title: '悲伤巧克力',content: '吃了会特别想哭，呜呜呜呜',price:'4',original_price:'5',id:'5',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'},{img: 'https://img0.baidu.com/it/u=1135608079,1041890161&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',title: '德芙巧克力',content: '传说中最物美价廉的巧克力，听说产生在那个山的那边海的那边的都是省速度市，甜美的青山水和令人陶醉的可可',price:'1',original_price:'7',id:'6',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'},{img: 'https://img0.baidu.com/it/u=1135608079,1041890161&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',title: '白巧克力',content: '这巧克力真白~听说产生在那个山的那边海的那边的都是省速度市，甜美的青山水和令人陶醉的可可',price:'3',original_price:'8',id:'7',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'},{img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2Fimg%2Ftupian%2Fpic%2F201611%2F14%2Fxinxing_qiaokeli-022.jpg%3Fdownload&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719467515&t=619593f0dac758fed2cc7502bc4748b5',title: '快乐巧克力',content: '吃了会很开心。嘻嘻嘻，听说产生在那个山的那边海的那边的都是省速度市，甜美的青山水和令人陶醉的可可',price:'2',original_price:'9',id:'8',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'},{img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2Fimg%2Ftupian%2Fpic%2F201611%2F14%2Fxinxing_qiaokeli-022.jpg%3Fdownload&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719467515&t=619593f0dac758fed2cc7502bc4748b5',title: '快乐巧克力',content: '吃了会很开心。嘻嘻嘻，听说产生在那个山的那边海的那边的都是省速度市，甜美的青山水和令人陶醉的可可',price:'2',original_price:'9',id:'9',goodinfoimg:'https://img2.baidu.com/it/u=4217825575,3521188604&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'}]const gopreview=(id)=>{const iteminfo=itemList.filter(item=>item.id==id)uni.setStorageSync('storagItemList',iteminfo)uni.navigateTo({url:"/pages/item/item?id="+id})}
</script>
<style scoped>.list {break-inside: avoid;width: 330rpx;border: 1px solid #f4f4f4;margin-top: 10px;border-radius: 20rpx;}.con {color: #8b8d8c;overflow: hidden;/*超出部分隐藏*/white-space: nowrap;/*禁止换行*/text-overflow: ellipsis;margin-left: 15rpx;margin-right: 15rpx;font-size: 26rpx;}.title {margin-left: 15rpx;margin-right: 15rpx;font-size: 26rpx;color: #8b8d8c;overflow: hidden;/*超出部分隐藏*/white-space: nowrap;/*禁止换行*/text-overflow: ellipsis;}/* 内容区 */.content {padding: 30rpx;box-sizing: border-box;column-count: 2;}image {width: 100%;border-radius: 6rpx;}
</style>

实现基本的布局和产品展示，数据源可以用后端接口的方式也行，这个影响不大，这边主要是方便修改和快速展示。这边其实也就一个跨页面传输和跳转，我这边是用id来判断选中的对象是哪一个，再用filter筛选对应的对象保存到storage实现跨页面传输

三.pages/item/item

<template><view v-if="goods_info.title"><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"><swiper-item><image :src="goods_info.img" mode=""></image></swiper-item><swiper-item><image :src="goods_info.img" mode=""></image></swiper-item><swiper-item><image :src="goods_info.img" mode=""></image></swiper-item></swiper><!-- 轮播图区域 -->
<!-- 	  <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><swiper-item v-for="(item, i) in goods_info.pics" :key="i"><image :src="item.pics_big" @click="preview(i)"></image></swiper-item></swiper> --><!-- 商品信息区域 --><view class="goods-info-box"><!-- 商品价格 --><view class="price">￥{{goods_info.price}}</view><!-- 信息主体区域 --><view class="goods-info-body"><!-- 商品名称 --><view class="goods-name">{{goods_info.title}}</view><!-- 收藏 --><view class="favi"><uni-icons type="star" size="18" color="gray"></uni-icons><text>收藏</text></view></view><!-- 运费 --><view class="yf">快递：免运费</view></view><!-- 商品详情信息 --><rich-text :nodes="goods_info.content"></rich-text><view class="goodinfoimg"><image :src="goods_info.goodinfoimg" mode="aspectFill"></image><image :src="goods_info.goodinfoimg" mode="aspectFill"></image></view><!-- 商品导航组件 --><view class="goods_nav"><!-- fill 控制右侧按钮的样式 --><!-- options 左侧按钮的配置项, 由data定义 --><!-- buttonGroup 右侧按钮的配置项, 由data定义 --><!-- click 左侧按钮的点击事件处理函数 --><!-- buttonClick 右侧按钮的点击事件处理函数 --><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view></view>
</template>
<script setup>import {ref} from 'vue'const goods_info=uni.getStorageSync('storagItemList')[0]||[]console.log(goods_info)const itemchek=	[{img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2Fimg%2Ftupian%2Fpic%2F201611%2F14%2Fxinxing_qiaokeli-022.jpg%3Fdownload&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719467515&t=619593f0dac758fed2cc7502bc4748b5',title: '快乐巧克力',content: '吃了会很开心。嘻嘻嘻',price:'2',original_price:'9',id:'9'}]const options=ref( [{icon: 'shop',text: '店铺',infoBackgroundColor: '#007aff',infoColor: "red"}, {icon: 'cart',text: '购物车',info: 0}])const buttonGroup=ref([{text: '加入购物车',backgroundColor: '#ff0000',color: '#fff'},{text: '立即购买',backgroundColor: '#ffa200',color: '#fff'}])
</script><style lang="scss">
swiper {height: 750rpx;image {width: 100%;height: 100%;}
}// 商品信息区域的样式
.goods-info-box {padding: 10px;padding-right: 0;.price {color: #c00000;font-size: 18px;margin: 10px 0;}.goods-info-body {display: flex;justify-content: space-between;.goods-name {font-size: 13px;padding-right: 10px;}// 收藏区域.favi {width: 120px;font-size: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;border-left: 1px solid #efefef;color: gray;}}// 运费.yf {margin: 10px 0;font-size: 12px;color: gray;}
}.goods-detail-container {// 给页面外层的容器，添加 50px 的内padding，// 防止页面内容被底部的商品导航组件遮盖padding-bottom: 50px;
}
.goodinfoimg{margin-top: 20px;width: 100vw;flex-wrap: wrap;display: flex;justify-content: center;
}
.goods_nav {// 为商品导航组件添加固定定位position: fixed;bottom: 0;left: 0;width: 100%;
}
</style>

后边的功能以后有时间再详细写写~

代码附github

git源码：https://github.com/stubidyue/goodsitem

参考文章：uniapp实现瀑布流_uniapp 小红书瀑布流-CSDN博客

参考文章：【愚公系列】2022年11月 uniapp专题-优购电商-商品详情页面_uniapp商品详情页-CSDN博客