uni-app x开发商城系统，商品列表

原创 于 2025-10-17 00:21:00 发布 · 437 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #windows #前端

一、概述

上一篇已经实现了Icon 图标显示，接下来，展示商品列表数据，效果如下：

image

二、布局页面

可以看到，显示为2列，每一列有2条数据。

这里依然使用flex布局，在开发的时候，我们可以在页面中，先把数据固定好，可以随意创造一些数据。

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">
                <view class="iconfont icon-ziyuan"></view>
                <text>网上超市</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-guanyuwomen"></view>
                <text>联系我们</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-tupian"></view>
                <text>社区图片</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-shipin"></view>
                <text>直播中心</text>
            </view>
        </view>
        <!-- 推荐商品 -->
        <view class="hot_goods">
            <view class="tit">推荐商品</view>
            <view class="goods_list">
                <view class="goods_item">
                    <image src="https://imgservice.suning.cn/uimg1/b2c/image/mMW59YHxKzNvTLlsdDlbVg.jpg_800w_800h_4e"
                        mode=""></image>
                    <view class="price">
                        <text>¥2195</text>cd
                        <text>¥2499</text>
                    </view>
                    <view class="name">
                        华为(HUAWVEI)荣耀6Plus 16G双4G版
                    </view>
                </view>
                <view class="goods_item">
                    <image src="https://2d.zol-img.com.cn/product/140_1200x900/735/cectVc8eFTXa.jpg" mode=""></image>
                    <view class="price">
                        <text>¥5780</text>
                        <text>¥6388</text>
                    </view>
                    <view class="name">
                        苹果Apple iPhone 6 Plus 16G 4G手机(联通三网版)
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                swiper: [{
                    id: 1,
                    url: 'https://picsum.photos',
                    img: 'https://picsum.photos/600/400?random=1'
                }, {
                    id: 2,
                    url: 'https://picsum.photos',
                    img: 'https://picsum.photos/600/400?random=2'
                }, {
                    id: 3,
                    url: 'https://picsum.photos',
                    img: 'https://picsum.photos/600/400?random=3'
                },
                {
                    id: 4,
                    url: 'https://picsum.photos',
                    img: 'https://picsum.photos/600/400?random=4'
                }
                ],
            }
        },
        methods: {

        }
    }
</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;
            }

            .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>

 以上代码固定了2条数据，编译代码，效果如下：

image

 三、调用api获取商品数据

上面固定了数据，只是为了调整样式，真正使用，还是要通过api接口获取数据。

需要自己搭建一个服务端，用来提供api接口。这里为了节省时间，直接使用现有的。

链接: https://pan.baidu.com/s/1lPrvZrzPszxHzCgbEysIzg?pwd=6e8k 提取码: 6e8k

下载shop_server.zip，根据readme.md文件说明，进行部署即可。

最后访问2个接口，如果显示没问题，那么就可以正式调用API接口了。

修改uni-app x项目下的utils/request.ts，修改变量baseURL

config.baseURL = 'http://localhost:8082'  // api地址

修改index.uvue，改成api接口获取数据。

完整代码如下：

<template>
    <view class="home">
        <!-- 轮播区域 -->
        <up-swiper :list="swiper" keyName="img" indicator indicatorMode="dot" circular></up-swiper>
        <!-- 导航区域 -->
        <view class="nav">
            <view class="nav_item">
                <view class="iconfont icon-ziyuan"></view>
                <text>网上超市</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-guanyuwomen"></view>
                <text>联系我们</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-tupian"></view>
                <text>社区图片</text>
            </view>
            <view class="nav_item">
                <view class="iconfont icon-shipin"></view>
                <text>直播中心</text>
            </view>
        </view>
        <!-- 推荐商品 -->
        <view class="hot_goods">
            <view class="tit">推荐商品</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>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                swiper: [],
                goods: []
            }
        },
        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,
                    });
                }
            }
        }
    }
</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;
            }

            .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>

重新编译代码运行，整体效果如下：

动画

shykevin
关注
uni-app学习(六):商品展示
weixin_42180036的博客
03-12 974
效果图： 首先是推荐商品 <view class="tjView"> <view class="tjtit"> 推荐商品 </view> </view> 样式: 样式并不唯一，可以根据自己需要更改，这里只是个人的一种实现。 .tjView { margin: 10rpx; background-color: #eee; width: 100%; overflow: hidden; .t
uni-app x，一个纯原生的Android App开发工具
djemx2025的博客
06-12 5787
下一代uni-app，一个神奇的产品。用vue语法、uni的组件、api，以及uts语言，编译出了kotlin的app。不再使用js引擎和webview。纯纯的kotlin原生app。uni-app x，让“跨平台开发性能不如原生”的这条曾广为流传的规则，扔进了历史的垃圾桶！
uni-app:商品详情
薛定谔的猫
03-13 2637
就是通过正则表达式的方式修改图片为display为block。在微信开发者工具中，点击工具栏上的编译模式下拉菜单，选择。导致问题的原因：在商品详情数据请求回来之前，data 中。配置可以在data的options里面配置。点击商品导航组件左侧的按钮，会触发。，因此初次渲染页面时，会导致。属性的值是否存在，从而使用。组件来实现商品导航区域的效果。
uni-app:商品列表
薛定谔的猫
03-12 2339
为了方便发起请求获取商品列表的数据，我们要根据接口的要求，事先定义一个请求参数对象data() {return {// 请求参数对象// 查询关键词query: '',// 商品分类Idcid: '',// 页码值// 每页显示多少条数据将页面跳转时携带的参数，转存到queryObj// 将页面参数转存到 this.queryObj 对象中为了方便开发商品分类页面，建议大家通过微信开发者工具，新建商品列表页面的编译模式在components目录上鼠标右键，选择新建组件将。
uni-app商城（六）商品列表
R·ZORO的博客
05-29 1746
uni-app，微信小程序
uniapp商城购物商品列表展示
每一篇博客都是对自己技术的沉淀
07-19 1489
this.scrollTopPage = e.target.scrollTop //滚动条实时位置。// 上拉的状态：more-loading前；rightListData: [], // 右侧区域商品列表。tabList: [{ // tab栏列表 类型：-1全部。leftListData: [], // 左侧区域商品列表。activeIndex: -1, // tab栏索引。listData: [], // 商品列表。scrollTopPage: 0, //回到顶部。-- tab栏 -->
uni-app开发商城类小程序
01-22
【uni-app开发商城类小程序】 uni-app是一款由DCloud(海豚浏览器团队)推出的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、微信小程序、支付宝小程序、百度小程序等多个平台上运行。这个框架的...
uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip
12-17
9. **调试与部署**：使用uni-app开发的应用，可以通过HBuilderX进行预览、调试和打包，然后发布到对应的平台。 10. **适应性设计**：由于目标平台多样，uni-app的组件需要考虑不同屏幕尺寸和设备特性的适配，确保在...
uni-app网易云音乐实战
10-22
HBuilderX是一个集成了开发、调试、发布功能的集成开发环境，支持uni-app、vue、react等多种框架。微信开发者工具是微信官方提供的开发工具，用于开发微信小程序。 在安装HBuilderX和微信开发者工具后，需要配置...
仓库是 uni-app 开发的微信小程序端，通过条件编译能兼容 H5 端 和 App 端
04-03
"仓库是 uni-app 开发的微信小程序端，通过条件编译能兼容 H5 端 和 App 端"这个项目，恰好展示了如何利用统一的框架解决跨平台开发的问题。下面将详细解析其中涉及的技术点和知识点。 首先，`uni-app` 是一个由...
仿淘宝详情页
03-29
可以实现累死与淘宝详情页的滑动效果
基于微信小程序的商品展示系统-UniApp
QQ860660016的博客
10-15 1090
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序被用户普遍使用,为方便用户能够可以随时进行小程序的相应信息内容的管理,特开发了基于微信小程序的商品展示系统小程序。 商品展示系统的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到自己所需要的信息,还有系统平台后期的可操作性,通过对信息内
基于微信小程序的商品展示系统设计和实现-UniApp（代码+文档+运行成功）
QQ123311197的博客
07-05 972
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序被用户普遍使用,为方便用户能够可以随时进行小程序的相应信息内容的管理,特开发了基于微信小程序的商品展示系统小程序。 商品展示系统的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到自己所需要的信息,还有系统平台后期的可操作性,通过对信息内
【uni-app从入门到实战】商品列表
Errol's Blog
09-07 4629
商品列表功能完成
uniapp - 商品详情展示-table风格1
Listest的博客
11-23 1575
1.效果图 2.代码如下 <template> <view class="container"> <u-navbar back-text="返回" title-color="#fff" back-icon-color="#ffffff" :is-fixed="true" :is-back="true" :back-text-style="{'color':'#fff'}" :background="background" :c
uni-App 商品列表
wenxi2367的博客
04-14 2102
创建组件 接收外界传入的goods 使用组件 导入 注册组件 使用 首页 列表页 应该传入对象 调用 使用 页面标题 目录 创建组件 使用组件 导入 注册组件 使用 首页 列表页 调用 使用 页面标题 ...
#uniapp#案例#商品列表制作
LYR 的博客
07-06 2838
可以看我的上一篇文章（这里复用了这个组件） 滚动组件 <template> <about> <view class="listcard" v-for=" i in 100 "> <view class="listcard-image"> <image src="../../static/img/0.jpg" mode="aspectFill"> </image> </view&gt
Uni-App - 页面样式与布局
热门推荐
02-19 1万+
重要说明 请删除 app.vue 中的全局样式： view{display:flex;} 在需要flex的时候使用flex即可。 尺寸单位 uni-app框架目前仅支持长度单位 px 和 %。与传统 web 页面不同，px 是相对于基准宽度的单位，已经适配了移动端屏幕，其原理类似于 rem。 PS：uni-app 的基准宽度为 750px。 开发者只需按照设计稿确定框架样式中的 p...
uni-app项目迁移到uni-app x
最新发布
09-04
1. **理解uni-app x**：基于[^1]，uni-app x是纯原生开发工具，提高了质量和性能。 2. **迁移准备**： - 确保项目使用Vue3 + TS（参考[^2]）。 - 安装必要的工具和插件。 3. **代码迁移**： - 可能的语法差异；...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值