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.mzph.cn/bicheng/21113.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

什么是ACP？

什么是ACP？

前言 ACP指的是应用程序控制平面&#xff0c;是微服务架构中的一个关键组成部分。它负责管理微服务架构中的各个微服务&#xff0c;包括服务发现和注册、负载均衡、服务路由、熔断和降级、配置管理等方面的功能。 A&#xff1a;可用性 所有请求都有响应。C&#xff1a;强一致…
阅读更多...
[DDR5 Jedec 3-4] 模式寄存器 Mode Register MRR/MRW

[DDR5 Jedec 3-4] 模式寄存器 Mode Register MRR/MRW

依公知及经验整理，原创保护，禁止转载。 专栏 《深入理解DDR》 1. 概念 模式寄存器用于定义各种操作模式。在初始化过程中，可以通过重新执行MRS命令来更改模式寄存器的内容。即使用户只想修改模式寄存器变量的一个子集，在发出MRS命令时也必须编程所有变量。 只有当所有ban…
阅读更多...
现实残酷！存款百万只是少数人的游戏，普通家庭能存多少？

现实残酷！存款百万只是少数人的游戏，普通家庭能存多少？

近期&#xff0c;网络上掀起了一股关于普通家庭终身存款上限的热烈讨论。一位网友通过简单的算术方式提出了一个假设&#xff1a;如果一对夫妻每年收入15万&#xff0c;并成功将6万存入银行&#xff0c;那么从25岁步入社会至60岁退休&#xff0c;他们理论上能积累到210万的存款…
阅读更多...
Go语言之GORM框架(四)——预加载，关联标签与多态关联，自定义数据类型与事务(完结篇)

Go语言之GORM框架(四)——预加载，关联标签与多态关联，自定义数据类型与事务(完结篇)

前言 本来是想着写多表关系的&#xff0c;不过写了一半发现重复的部分太多了&#xff0c;想了想与其做一些重复性工作&#xff0c;不如把一些当时觉得抽象的东西记录一下&#xff0c;就当用一篇杂记完成专栏的最后一篇文章吧。 预加载 简单示例 预加载主要用于在多表关系中…
阅读更多...
谷歌浏览器的平替，内置开挂神器，我已爱不释手！

谷歌浏览器的平替，内置开挂神器，我已爱不释手！

油猴浏览器正式版是一款基于谷歌Chromium源码开发的浏览器&#xff0c;它集成了集成了强大的油猴扩展&#xff08;Tampermonkey&#xff09;&#xff0c;使得用户可以轻松安装各种脚本&#xff0c;从而增强网页浏览体验。提供了一个更加个性化和高效的浏览体验。 油猴扩展&…
阅读更多...
git使用流程

git使用流程

1.下载git 搜索下载 2.注册github账号&#xff08;打开爬墙工具&#xff09; 创建一个仓库 3.配置邮箱和密码 4.所以找一个文件夹 鼠标右键 选择 open Git Bash here&#xff08;当前文件夹下打开命令行&#xff09; 输入命令 配置用户名和邮箱 5.将建的仓库克隆下来 …
阅读更多...
【JS实战案例汇总——不定时更新版】

【JS实战案例汇总——不定时更新版】

一&#xff1a;转换时间案例 1 需求&#xff1a; 用户输入秒数&#xff0c;系统会自动将秒数转变为小时、分钟、秒&#xff0c;并且不满10的要在前面补零 2 算法&#xff1a; 小时:hour parseInt(总秒数/60/60%24) 分钟:minute parseInt(总秒数/60%60) 秒数:second pa…
阅读更多...
测试基础09：缺陷（bug）生命周期、定位方式和管理规范

测试基础09：缺陷（bug）生命周期、定位方式和管理规范

课程大纲 1、缺陷&#xff08;bug&#xff09;生命周期 2、缺陷&#xff08;bug&#xff09;提交规范 2.1 宗旨 简洁、清晰、可视化&#xff0c;减少沟通成本。 2.2 bug格式和内容 ① 标题&#xff1a;一级功能-二级功能-三级功能_&#xff08;一句话描述bug&#xff1a;&…
阅读更多...
---初始Linux---

---初始Linux---

一、认识计算机 计算机 硬件 软件 硬件&#xff1a;就是计算机系统中由电子、机械和光电元件等组成的各种物理装置的总称&#xff08;CPU\GPU\...&#xff09; 软件&#xff1a;是用户和计算机硬件之间及进行交流的工具 然而一个简单的计算机或者说基本的计算机就是有两大…
阅读更多...
C++ A (1020) : 幂运算

C++ A (1020) : 幂运算

文章目录 一、题目描述二、参考代码 一、题目描述 二、参考代码 #include<bits/stdc.h> using namespace std; typedef long long ll;void qq(ll a, ll b, ll m) {if (a 0) cout << 0 << endl;;ll out 1;a % m;while (b > 0){if (b & 1)//奇数的最…
阅读更多...
lux和ffmpeg进行下载各大主流自媒体平台视频

lux和ffmpeg进行下载各大主流自媒体平台视频

1、lux下载&#xff0c;链接&#xff1a;https://pan.baidu.com/s/1WjGbouL3KFTU6LeqZmACpA?pwdagpp 提取码&#xff1a;agpp 2、ffmpeg下载&#xff0c;跟lux放在同一个目录&#xff1b; 3、为lux、ffmpeg设置环境变量&#xff1b; 4、WINR&#xff0c;打开运行&#xff0…
阅读更多...
带你自学大语言模型系列 —— 前言

带你自学大语言模型系列 —— 前言

今天开始&#xff0c;我计划开启一个系列 《带你自学大语言模型》&#xff0c;内容也已经准备了一段时间了。 该系列的落脚点是“自学”和“大语言模型”&#xff0c;二者不分伯仲&#xff0c;这也是本系列和其他技术文章不一样的地方。 至于原因&#xff0c;我不想只做大语言…
阅读更多...
【C++】STL中vector常见功能的模拟实现

【C++】STL中vector常见功能的模拟实现

前言&#xff1a;在上一篇中我们讲到了Vector的一些常见功能的使用方式&#xff0c;今天为了进一步的去学习Vector和能够更深度的去理解Vector的一些底层的原理。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:高质量&#xff23;学习 &…
阅读更多...
鸿蒙ArkTS声明式开发：跨平台支持列表【禁用控制】 通用属性

鸿蒙ArkTS声明式开发：跨平台支持列表【禁用控制】 通用属性

禁用控制 组件是否可交互&#xff0c;可交互状态下响应[点击事件]、[触摸事件]、[拖拽事件]、[按键事件]、[焦点事件]和[鼠标事件]。 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到…
阅读更多...
【一刷《剑指Offer》】面试题 30：最小的 k 个数

【一刷《剑指Offer》】面试题 30：最小的 k 个数

牛客对应题目链接&#xff1a;最小的K个数_牛客题霸_牛客网 (nowcoder.com) 力扣对应题目链接&#xff1a;LCR 159. 库存管理 III - 力扣&#xff08;LeetCode&#xff09; 核心考点 &#xff1a; topK 问题。 一、《剑指Offer》内容 二、分析题目 1、排序&#xff08;O(Nlo…
阅读更多...
接口interfance的基本使用

接口interfance的基本使用

一.为什么有接口&#xff1f; 接口:就是一种规则。 二.接口的定义和使用 1.接口用关键字interface来定义 public interface 接口名{} 2.接口不能实例化 3.接口和类之间是实现关系,通过implements关键字表示 4.接口的子类(实现类) 注意1&#xff1a; 接口和类的实现关系…
阅读更多...
43.自定义线程池（一）

43.自定义线程池（一）

ThreadPool是线程池&#xff0c;里面是一定数量的线程&#xff0c;是消费者。 BlockingQueue阻塞队列&#xff0c;线程池中的线程会从阻塞队列中去拿任务执行。任务多了线程池处理不过来了&#xff0c;就会到Blocking Queue中排队&#xff0c;等待执行。链表结构&#xff0c;特…
阅读更多...
Netfilter/iptables

Netfilter/iptables

1. Netfilter组件图 https://en.wikipedia.org/wiki/Netfilter 其中&#xff1a; etables作用于数据链路层&#xff0c;arptables针对ARP, iptables/ip6tables针对IP层。 nftables 是新的包过滤组件. nft是相对应的新的用户态组件&#xff0c;用于替换etables,arptables,ipt…
阅读更多...
从tensorflow导入EarlyStopping能运行但是一直提示未解析

从tensorflow导入EarlyStopping能运行但是一直提示未解析

在pycharm中导入早停机的库时&#xff0c;碰上一个问题 from tensorflow.keras.callbacks import EarlyStopping这一条代码中&#xff0c;EarlyStopping一直有个红色波浪线&#xff0c;代表着找不到这个库&#xff0c;提示未解析啥的。 但是运行是可以运行的&#xff0c;虽然可…
阅读更多...
GPT-4o如何重塑AI未来！

GPT-4o如何重塑AI未来！

如何评价GPT-4o? 简介&#xff1a;最近&#xff0c;GPT-4o横空出世。对GPT-4o这一人工智能技术进行评价&#xff0c;包括版本间的对比分析、GPT-4o的技术能力以及个人感受等。 GPT-4o似乎是一个针对GPT-4模型进行优化的版本&#xff0c;它在性能、准确性、资源效率以及安全和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023