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

devtools/2024/9/22 15:04:04/

最终效果：

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

相关文章

Python应用开发——Streamlit 创建多页面应用程序进行APP的构建

Python应用开发——Streamlit 创建多页面应用程序进行APP的构建

创建多页面应用程序 在附加功能中，我们介绍了多页面应用程序，包括如何定义页面、构建和运行多页面应用程序，以及如何在用户界面的页面间导航。更多详情，请参阅多页面应用程序指南Multipage apps - Streamlit Docs 在本指南中，让我们通过将上一版本的 streamlit hello 应…
阅读更多...
HTML:认识HTML与基本语法的学习

HTML:认识HTML与基本语法的学习

前言 HTML&#xff08;超文本标记语言&#xff09;是用于创建网页的标记语言&#xff0c;由一系列标签组成&#xff0c;定义网页中的元素。由蒂姆伯纳斯 - 李于1990年代初发明&#xff0c;最初用于科研机构间共享文档&#xff0c;迅速演变为Web开发基础。无论是电商、博客、新…
阅读更多...
Jenkins流水线pipeline--基于上一章的工作流程

Jenkins流水线pipeline--基于上一章的工作流程

1流水线部署 1.流水线文本名Jenkinsfile,将流水线放入gitlab远程仓库代码里面 2构建参数 2pipeline脚本 Jenkinsfile文件内容 pipeline {agent anyenvironment {key"value"}stages {stage("拉取git仓库代码") {steps {deleteDir()checkout scmGit(branc…
阅读更多...
即时通讯平台及门户系统WorkPlus打造移动应用管理平台

即时通讯平台及门户系统WorkPlus打造移动应用管理平台

在全球化和数字化时代&#xff0c;企业管理和沟通的方式正发生着巨大的变化。为了实现高效的协作和资源共享&#xff0c;企业越来越倾向于使用即时通讯及门户系统。这两种系统结合起来&#xff0c;可以提供一套完整的沟通和信息发布平台&#xff0c;促进内部协作和信息管理。 …
阅读更多...
【全开源】Java共享台球室无人系统支持微信小程序+微信公众号+H5

【全开源】Java共享台球室无人系统支持微信小程序+微信公众号+H5

智能引领台球新体验 一、引言&#xff1a;共享经济的新篇章 在共享经济的大潮中&#xff0c;各类共享服务层出不穷&#xff0c;为人们的生活带来了极大的便利。共享台球室作为其中的一员&#xff0c;以其独特的魅力吸引了众多台球爱好者的目光。而今天&#xff0c;我们要介绍…
阅读更多...
【Qt】对话框

【Qt】对话框

文章目录 1 :peach:对话框介绍:peach:2 :peach:对话框的分类:peach:2.1 :apple:模态对话框:apple:2.2 :apple:非模态对话框:apple:2.3 :apple:混合属性对话框:apple: 3 :peach:Qt 内置对话框:peach:3.1 :apple:消息对话框 QMessageBox:apple: 1 &#x1f351;对话框介绍&#x…
阅读更多...
php获取今天凌晨零点的时间

php获取今天凌晨零点的时间

不废话直接上代码 //使用strtotime $midnightToday strtotime("today midnight"); //输出&#xff1a;1716998400 //如果是明天 $midnightToday 86400 //后天 $midnightToday 86400*2//ORM中比对使用 $row ModelVisit::where(uid,$this->uid)->where(visi…
阅读更多...
elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变

elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变

业务需求&#xff1a; 点击查询弹列表框 勾选列表选项保存 可删除可重新查询列表添加 遇到的问题&#xff1a;删除之后查询列表selection回显问题 解决&#xff1a;row-click配合:reserve-selection"true"使用 <el-tableref"refPlanTable":data"…
阅读更多...
最新文章

Copyright @ 2022~2023