Uniapp写一个简单的商品瀑布流界面+商品详情

最终效果：

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