最终效果：
整体内容比较简单，参考了一篇瀑布流文章和一篇商品详情文章随便修改整了下，主要是给想做这方便面的新人一个简单逻辑的展示（其实我也是第一次写这个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