当前位置: 首页 > news >正文

uni-app x商城,商品列表组件封装以及使用

一、概述

上一篇文章,已经实现了导航区域跳转,接下来要实现商品列表展示。

首页展示的,商品信息以及商品列表也,展示的页面数据,布局都是一样的。

没有必要重复写代码,因此可以将这些相同的内容,封装成一个组件,然后调用即可,节省代码,调试也方便。

二、封装组件

在uni-app x项目根目录,创建components目录,专门用来存放组件。然后在里面,创建文件。components目录结构如下:

components
└── goods-list└── goods-list.uvue

 

打开pages/index/index.uvue文件,将商品列表的view标签内容,以及css样式,剪切到文件components/goods-list/goods-list.uvue

goods-list.uvue完整内容如下:

<template><view><view class="goods_list"><view class="goods_item" v-for="item in goods" :key="item.id"><image :src="item.img_url" mode=""></image><view class="price"><text>¥{{item.sell_price}}</text><text>¥{{item.market_price}}</text></view><view class="name">{{item.title}}</view></view></view></view>
</template><script>export default {props: ['goods'],data() {return {}},methods: {}}
</script><style lang="scss">.goods_list {padding: 0 15rpx;display: flex;flex-direction: row; //横向排列flex-wrap: wrap;justify-content: space-between;.goods_item {background: #fff;width: 355rpx;margin: 10rpx 0;padding: 15rpx;box-sizing: border-box;image {width: 80%;height: 150px;display: block;margin: auto; //图片居中
            }.price {display: flex;flex-direction: row;color: $shop-color;font-size: 36rpx;// margin-top: 15rpx;margin: 20rpx 0 5rpx 0;text:nth-child(2) {color: #ccc;font-size: 28rpx;margin-top: 5rpx;margin-left: 17rpx;text-decoration-line: line-through;}}.name {font-size: 38rpx;line-height: 50rpx;padding-bottom: 15rpx;padding-top: 10rpx;}}}
</style>

说明:

<template>里边的view内容,是从index.uvue里面,剪切过来的。

<style>里边的css内容,是从index.uvue里面,剪切过来的。 需要注意的是,<style>必须指定为lang="scss",否则css样式会报错。

<script>里边,props: ['goods'],这个表示组件接收参数goods,用来渲染商品列表数据。

 三、首页引用组件

修改pages/index/index.uvue文件,导入组件商品列表,并使用。

index.uvue完整代码如下:

<template><view class="home"><!-- 轮播区域 --><up-swiper :list="swiper" keyName="img" indicator indicatorMode="dot" circular></up-swiper><!-- 导航区域 --><view class="nav"><view class="nav_item" v-for="(item,index) in navs" :key="index" @click="nav_item_click(item.path)"><view :class="item.icon"></view><text>{{item.title}}</text></view></view><!-- 推荐商品 --><view class="hot_goods"><view class="tit">推荐商品</view><GoodsList :goods="goods"></GoodsList></view></view>
</template><script>import GoodsList from '../../components/goods-list/goods-list.uvue'export default {components: {GoodsList: GoodsList},data() {return {title: 'Hello',swiper: [],goods: [],navs: [{icon: 'iconfont icon-ziyuan',title: '网上超市',path: '/pages/goods/goods'},{icon: 'iconfont icon-guanyuwomen',title: '联系我们',path: '/pages/contact/contact'},{icon: 'iconfont icon-tupian',title: '社区图片',path: '/pages/pics/pics'},{icon: 'iconfont icon-shipin',title: '直播中心',path: '/pages/videos/videos'}]}},onLoad() {this.get_swiper()this.get_goods()},methods: {// 获取轮播图的数据
            async get_swiper() {try {const res = await this.$http.get('/api/getlunbo', {})// console.log("res", res)this.swiper = res.message} catch (err : any) {// console.error('获取轮播图失败', err)
                    uni.showToast({title: '获取轮播图失败' + err.statusCode,});}},// 获取热门商品列表数据
            async get_goods() {try {const res = await this.$http.get('/api/getgoods?pageindex=1', {})// console.log("res", res)this.goods = res.message} catch (err : any) {// console.error('获取轮播图失败', err)
                    uni.showToast({title: '获取热门商品列表失败' + err.statusCode,});}},// 导航点击的处理函数
            nav_item_click(path) {console.log("path", path)uni.navigateTo({url: path})}}}
</script><style lang="scss">.home {swiper {width: 750rpx;height: 380rpx;image: {height: 100%;width: 100%;}}.nav {display: flex;flex-direction: row; //横向排列justify-content: space-around; //平均分布在一行
.nav_item {text-align: center;view {width: 120rpx;height: 120rpx;background: $shop-color;border-radius: 60rpx;margin: 10px auto;line-height: 120rpx;color: white;font-size: 50rpx;text-align: center;}.icon-tupian {font-size: 45rpx;}text {font-size: 30rpx;}}}.hot_goods {background: #eee;overflow: hidden;margin-top: 10px;.tit {height: 50px;line-height: 50px;color: $shop-color;text-align: center;letter-spacing: 20px;background: #fff;margin: 7rpx 0;}}}
</style>

注意,关键代码,主要有几个地方:

import GoodsList from '../../components/goods-list/goods-list.uvue'
export default {components: {GoodsList: GoodsList},

组件的名字,最好用驼峰命名发,不要带有横线。

在<template>里面使用组件,并传递参数

<GoodsList :goods="goods"></GoodsList>

重新编译代码,运行,确保首页商品信息,展示正常。

image

四、商品列表页面引用组件

修改 pages/goods/goods.uvue文件

完整代码如下:

<template><view class="goods_list"><GoodsList :goods="goods"></GoodsList></view>
</template><script>import GoodsList from '../../components/goods-list/goods-list.uvue'export default {components: {GoodsList: GoodsList},data() {return {goods: [],pageindex: 1}},onLoad() {this.get_goods()},methods: {// 获取商品列表数据
            async get_goods() {try {const res = await this.$http.get('/api/getgoods?pageindex=' + this.pageindex, {})console.log("res", res)this.goods = res.message} catch (err : any) {
                    uni.showToast({title: '获取商品列表失败' + err.statusCode,});}},}}
</script><style lang="scss">.goods_list {background: #eee;}
</style>

说明:

这里导入组件,引用组件方式,和首页是一样的。

但需要注意的是,这里的调用api接口,和首页是有区别的。

首页,是显示1页。 这里需要进行动态分页展示

 

编译代码,重新运行,效果如下:

image

 

这里的标题显示不对,还需要修改pages.json文件

只需要修改goods的路由配置

{"path": "pages/goods/goods","style": {"navigationBarTitleText": "商品列表"}
},

 

再次编译运行,效果如下:

image

 

http://www.hskmm.com/?act=detail&tid=32967

相关文章:

  • 深入解析:【Proteus8.17仿真】 STM32仿真 0.96OLED 屏幕显示ds1302实时时间
  • 2025年10月床垫品牌推荐榜:围绕环保认证与试睡政策的系统化评析
  • 贪心策略总结
  • 2025年10月上海装修公司推荐榜:极家家居设计标准与施工节点全维度对比
  • 完整教程:在鸿蒙NEXT中使用WebSocket实现实时网络通信
  • Atcoder Regular Contest 做题记录
  • Linux sas3ircu RAID 控制管理工具详解
  • Linux StorCLI RAID 控制管理工具详解
  • 2025年浓缩机厂家权威推荐榜:高效浓缩机/尾矿浓缩机/污泥浓缩机/新型浓缩机/矿用浓缩机/浓密机/中心转动浓缩机/真空浓缩机/污泥脱水机
  • 新手学AI算法/嵌入式 “知其然不知其所以然”?华清远见虚拟仿真工具拆分算法组件 + 动态调参,过程感拉满
  • http1.0,http2.0,http3.0各个协议的特点和区别
  • Clip Studio Paint 4.0.3下载地址与安装教程
  • ​​示波器探头的正确选择与使用指南​
  • C# Avalonia 16- Animation- KeySplineAnimation
  • 2025年工厂维保服务厂家权威推荐榜:机电维修、应急维修、设备安装维修、运维服务全方位解析
  • windows 11 或 Windows 10 注册表修改企业版为专业版
  • 低代码平台核心概念与设计理念
  • C# Avalonia 16- Animation- ExpandElement2
  • 2025年10月洗碗机品牌榜单推荐:五强性能全解析
  • PolarDB Supabase 助力 Qoder、Cursor、Bolt.diy 完成 VibeCoding 最后一公里
  • 问题一
  • 2025年陶瓷过滤机厂家权威推荐榜:盘式/矿用/全自动陶瓷真空过滤机,真空脱水机,尾矿干排设备,圆盘过滤机源头企业深度解析
  • 00-第一个C语言程序-Hello,world
  • 提取ai字幕
  • 乙二醇
  • 图论初步 - L
  • CSP-S2 历年真题 - L
  • 2025 集装箱吊机厂家推荐:乳山华江以智能技术+硬核质量破局,解决选机难题!
  • springboot结合阿里巴巴easyexcel,实现一键导出数据到Excel中
  • 深入解析:PX4 无人机地面调试全攻略:从机械到参数的系统优化