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: '白巧克力',
	          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博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/670497.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

InsightFace | 基于 AI 增强的人脸检测

InsightFace | 基于 AI 增强的人脸检测

点击下方卡片&#xff0c;关注“小白玩转Python”公众号 概述 我将使用InsightFace&#xff0c;这是一个以其在复杂面部分析任务中的卓越表现而闻名的开源AI工具包。该工具包可以帮助完成诸如人脸检测、关键点识别、情感识别、年龄和性别估算以及属性分析等任务。 示例 !pip in…
阅读更多...
yolov10/v8 loss详解

yolov10/v8 loss详解

v10出了就想看看它的loss设计有什么不同&#xff0c;看下来由于v8和v10的loss部分基本一致就放一起了。 v10的论文笔记&#xff0c;还没看的可以看看&#xff0c;初步尝试耗时确实有提升 好记性不如烂笔头&#xff0c;还是得记录一下&#xff0c;以免忘了&#xff0c;废话结束…
阅读更多...
tcp链接中的三次挥手是什么原因

tcp链接中的三次挥手是什么原因

一、tcp链接中的正常四次挥手过程&#xff1f; 刚开始双方都处于 ESTABLISHED 状态&#xff0c;假如是客户端先发起关闭请求。四次挥手的过程如下&#xff1a; 1、客户端打算关闭连接&#xff0c;此时会发送一个 TCP 首部 FIN 标志位被置为 1 的报文&#xff0c;也即 FIN 报文…
阅读更多...
Pycharm的基础设置+Pycharm与AutoDL服务器连接

Pycharm的基础设置+Pycharm与AutoDL服务器连接

一.pycharm的基础设置 1.下载pycharm profession版&#xff0c;配置之前博客里面的解释器mask2 2.run detect.py 3.终端的设置 &#xff08;1&#xff09;先直接在终端里面pip install 我们再创建一个测试python文件&#xff1a;terninal_test.py 虽然上面安装成功了包&#x…
阅读更多...
Nested KVM Hypervisor Support

Nested KVM Hypervisor Support

Description Nested KVM是指基于虚拟化技术的虚拟机管理系统。 Nested KVM在Intel处理器上&#xff0c;KVM使用Intel的vmx&#xff08;virtualmachine eXtensions&#xff09;来提高虚拟机性能&#xff0c;即硬件辅助虚拟化技术。如果一台虚拟机能够和物理机一样支持vmx&…
阅读更多...
秘塔AI搜索，看看如今的AI搜索能有多懂你

秘塔AI搜索，看看如今的AI搜索能有多懂你

你们正在用的浏览器是哪一款&#xff1f; 平时搜索时是否也有过这样的经历&#xff0c;在搜索引擎里输入关键词&#xff0c;然后在一堆广告中大海捞针&#xff0c;一不小心就入了一刀999的坑&#xff0c;又或是陈年资料令人发懵&#xff0c;压根儿就别想找到宝藏资源&#xff…
阅读更多...
【Qt秘籍】[007]-LineEdit Pushbutton控件

【Qt秘籍】[007]-LineEdit Pushbutton控件

Qt的中有着各种各样的控件&#xff0c;相较于传统C/C的输出默认只能在控制台实现&#xff0c;Qt中可以有不同的接口实现各种不同的功能&#xff0c;下面我们将实现不同功能的输出 hello world&#xff01; 标签Label 【Qt秘籍】[006]-Label实现Hello World程序-编程第一步-CSD…
阅读更多...
Prime1 - 提权的另一种解法，彻底搞懂OpenSSL解密渗透提权，超强思路版。

Prime1 - 提权的另一种解法，彻底搞懂OpenSSL解密渗透提权，超强思路版。

提权枚举 现在我们直接从低权限用户开始&#xff1b;我们先按照提权步骤&#xff0c;简单的系统枚举 虽然我们知道可以利用系统版本低进行内核提权&#xff0c;内核提权虽然比较快比较方便&#xff0c;但也比较暴力&#xff0c;缺点非常明显&#xff1b;很容易导致系统服务中…
阅读更多...
GIS结合物联网：塑造智慧地球的新篇章

GIS结合物联网：塑造智慧地球的新篇章

在信息技术飞速发展的今天&#xff0c;地理信息系统&#xff08;GIS&#xff09;与物联网&#xff08;IoT&#xff09;的深度融合&#xff0c;正以前所未有的方式重塑着我们对世界的认知。本文将深入探讨GIS与物联网结合的原理、应用实践以及面临的挑战与未来展望&#xff0c;共…
阅读更多...
刷代码随想录有感（88）：贪心算法——加油站

刷代码随想录有感（88）：贪心算法——加油站

题干&#xff1a; 代码&#xff1a; class Solution { public:int canCompleteCircuit(vector<int>& gas, vector<int>& cost) {int totalcost 0;for(int i 0; i < gas.size(); i){totalcost gas[i] - cost[i];}if(totalcost < 0)return -1;int …
阅读更多...
数据库、数据表的基本操作

数据库、数据表的基本操作

1.数据库的基本操作 &#xff08;1&#xff09;创建数据库 &#xff08;2&#xff09;删除数据库 &#xff08;3&#xff09;将数据库的字符集修改为gbk gbk是汉字内码扩展规范&#xff0c;是GB2312和GB13000的扩展&#xff0c;主要用于简体中文。 &#xff08;4&#xff09;…
阅读更多...
vmware 正版免费下载

vmware 正版免费下载

Broadcom 已经收购了 vmware 并且对普通用户提供免费服务. 那么我们怎么去获取这个玩意呢, 注册完之后打开就是这么个狗屎 , 根本不知道在哪里下载&#xff0c;注册的时候还不能用国内邮箱更是超级狗屎 转到 dashboard 搜索 workstation Pro你会搜索到这么一个奇怪的网址然后…
阅读更多...
LeetCode 算法：盛最多水的容器c++

LeetCode 算法：盛最多水的容器c++

原题链接&#x1f517;&#xff1a;盛最多水的容器 难度&#xff1a;中等⭐️⭐️ 题目 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以…
阅读更多...
JavaSE——集合框架二（6/6）-（案例）补充知识：集合的嵌套（需求与分析、问题解决、运行测试）

JavaSE——集合框架二（6/6）-（案例）补充知识：集合的嵌套（需求与分析、问题解决、运行测试）

目录 案例引入 需求与分析 问题解决 运行测试 集合的嵌套 顾名思义&#xff0c;指的是集合中的元素又是一个集合。 本篇通过一个案例对这一知识进行了解&#xff1a; 案例引入 需求与分析 要求在程序中记住如下省份和其对应的城市信息&#xff0c;记录成功后&#xff0…
阅读更多...
【AI】llama-fs的 安装与运行

【AI】llama-fs的 安装与运行

pip install -r .\requirements.txt Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved.Install the latest PowerShell for new features and improvements! https://aka.ms/PSWindows(venv) PS D:\XTRANS\pythonProject>
阅读更多...
【错误记录】HarmonyOS 运行报错 ( Failure[MSG_ERR_INSTALL_FAILED_VERIFY_APP_PKCS7_FAIL] )

【错误记录】HarmonyOS 运行报错 ( Failure[MSG_ERR_INSTALL_FAILED_VERIFY_APP_PKCS7_FAIL] )

文章目录 一、报错信息二、问题分析二、解决方案 一、报错信息 在 DevEco Studio 中 , 运行程序 , 编译时正常编译 , 但是在真机运行时 , 报如下错误 , 核心报错信息是 " Failure[MSG_ERR_INSTALL_FAILED_VERIFY_APP_PKCS7_FAIL] " ; 完整报错信息 : 05/29 10:58:55…
阅读更多...
【软件全套资料】软件项目各阶段各类资料文档支撑，项目申报，立项，开发，运维，交付，售后，体系认证，评审资质

【软件全套资料】软件项目各阶段各类资料文档支撑，项目申报，立项，开发，运维，交付，售后，体系认证，评审资质

在软件开发过程中&#xff0c;文档扮演着至关重要的角色。它不仅记录了项目的需求、设计和开发过程&#xff0c;还为项目的维护和管理提供了便利。本文将详细介绍软件开发文档的重要性和作用&#xff0c;以及需求分析、软件设计、开发过程、运维管理和项目管理等方面的文档编写…
阅读更多...
大数据治理平台建设解决方案（66页PPT）

大数据治理平台建设解决方案（66页PPT）

方案介绍&#xff1a; 本解决方案旨在构建一个集数据集成、数据存储、数据处理、数据分析和数据安全于一体的大数据治理平台&#xff0c;帮助企业实现数据资产的统一管理和高效利用&#xff0c;提升业务决策效率和准确性。本大数据治理平台建设解决方案旨在为企业提供全面、高…
阅读更多...
支持AMD GPU的llm.c

支持AMD GPU的llm.c

anthonix/llm.c: LLM training in simple, raw C/HIP for AMD GPUs (github.com) llm.c for AMD devices This is a fork of Andrej Karpathys llm.c with support for AMD devices. 性能 在单个7900 XTX显卡上使用默认设置&#xff0c;目前的训练步骤耗时约为79毫秒&#x…
阅读更多...
使用IDEA在WSL2的Ubuntu的docker中运行项目

使用IDEA在WSL2的Ubuntu的docker中运行项目

1、新建项目 1.1 从远程仓库拉取代码 2、配置环境 2.1 配置IDEA运行环境 2.1.1 配置JDK 注意&#xff1a;Ubuntu 20.04运行项目请使用JDK11&#xff0c;使用JDK8会编译报错&#xff0c;报错如下&#xff1a; 2.1.2 配置Maven 2.1.3 配置运行环境 2.1.4 配置远程Debug 2.2、配…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站