商城项目商品列表页的渲染实现(含动图)

有了v-for循环，渲染商品列表简直不要太方便了，以前写一个商品列表页要一天，现在只需要几分钟，除了模拟数据会耗一点时间。这里可以了解下Mock模拟数据，它可使前端工程师独立于后端进行开发，在前端可以先行自己测试，之后再与后端对接联调，可以节省不少的时间。

所谓孰能生巧，vue构建项目联系的多了以后也可随意的封装组件，抽离组件。用起来得心应手。
实现效果动图如下：

商品列表页的实现步骤如下：

1.新建商品列表组件

新建商品列表组件goodsList.vue文件，在首页点击查看商品时，跳转到商品列表。这里使用router-link，绑定跳转后的路径为商品列表页的路径/goods。如下：
index.vue文件：

2.商品列表组件的实现

导入头部和尾部组件
商品列表页与首页共用header部分和footer部分，因为header部分和footer部分我是单独的组件，所以这里只需要引入header部分和footer部分的组件即可。如下：

声明组件

使用组件

中间部分商品列表的实现
商品列表部分布局由nav导航部分和一些商品图标和商品信息简单构成，还可以根据需要实现更为复杂的需求。

2.1 没有采用mock数据模拟，所以直接定义了一个数据列表，通过v-for循环从列表中读取数据，进而渲染到页面。定义的数据列表如下：

return {count: 0,goodsList: [{src: require('../assets/goods/mi6.jpg'),productName: '小米6',productId: 10001,prodcutPrice: 1998,},{src: require('../assets/goods/miS2.jpg'),productName: '红米S2',productId: 10002,prodcutPrice: 996,},{src: require('../assets/goods/mi6x.jpg'),productName: '小米6x',productId: 10001,prodcutPrice: 1998,},{src: require('../assets/goods/mi8SE.jpg'),productName: '小米8SE',productId: 10001,prodcutPrice: 2558,},{src: require('../assets/goods/jiadian1.jpg'),productName: '家庭电视',productId: 10001,prodcutPrice: 6126,},{src: require('../assets/goods/pingheng.jpg'),productName: '平衡车',productId: 10001,prodcutPrice: 2500,},{src: require('../assets/goods/note.jpg'),productName: '笔记本',productId: 10001,prodcutPrice: 5679,},{src: require('../assets/goods/zipai.jpg'),productName: '自拍杆',productId: 10001,prodcutPrice: 129,}]}
},

2.2 商品列表页数据渲染实现代码如下：

<div class="goods"><nav class="nav-goods"><a href="/" class="home">Home/</a><span>Goods</span><!-- 购物车 --><div class="cart"><router-link :to="{path: '/carts'}"><img src="../assets/sider-shopcar.png"><i>购物车({{count}})</i></router-link></div></nav><div class="goodsinfo"><ul><!-- 渲染商品列表数据 --><li v-for="item in goodsList"><!-- 商品图片渲染 --><div class="pic"><a href="#"><img :src="item.src" alt=""></a></div><!-- 渲染商品名称价格等描述 --><div class="goodsDesc"><div class="goodsname">{{item.productName}}</div><div class="goodsprice">{{item.prodcutPrice}}</div><div class="cartBtn"><span>加入购物车</span></div></div></li></ul></div>
</div>

实现的效果如下：

本项目源码：vue商城项目源码

每天进步一点点、充实一点点、加油！！！

商城项目商品列表页的渲染实现(含动图)相关推荐

美多商城项目：商品数据库表设计、准备商品数据、首页广告、商品列表页
一.商品数据库表设计 1.1 SPU和SKU 在电商中对于商品,有两个重要的概念:SPU和SKU 1. SPU介绍 SPU = Standard Product Unit (标准产品单位) SPU是商 ...
美多商城之商品(商品列表页)
四.商品列表页 4.1 商品列表页分析 4.1.1. 商品列表页组成结构分析 1.商品频道分类已经提前封装在contents.utils.py文件中,直接调用即可. 2.面包屑导航可以使用三级分类 ...
vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法
vue项目实现从商品列表页跳转详情页后,返回列表页保持页面在原位置,且列表页刷新的方法页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> ...
商城微信小程序（二）——完成分类页面及商品列表页
分类页面预览图: 分类页面主要代码 index.js // pages/category/index.js import {request } from "../../request/ind ...
5- vue django restful framework 打造生鲜超市 -完成商品列表页(上)
使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...
商品详情页动态渲染系统：大型网站的多机房4级缓存架构设计
124_大型电商网站的商品详情页的深入分析之前,咱们也是说在讲解这个商品详情页系统的架构缓存架构,高可用服务商品详情页系统,我们只是抽取了其中一部分来讲解,而且还做了很大程度的简化主要是为了用 ...
Django项目-商品详情页
商品详情页分析和准备 1.商品分类 2.面包屑 3.热销排行 4.商品名字.价格.数量.规格(颜色,内存,) 总价(和数量有关系) 5.商品详情规格与包装售后服务 6. 商品评价(完成下单后) 商 ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
ECSHOP 如何删除商品列表页购买弹出商品属性框后面的价格
场景如图: 商品列表页购买弹出商品属性框是由js文件控制的. 打开JS文件js/common.js 问题一.弹出后属性多时,看不到[购买][取消]按钮搜索代码: newDiv.style.hei ...

商城项目商品列表页的渲染实现(含动图)

1.新建商品列表组件

2.商品列表组件的实现

每天进步一点点、充实一点点、加油！！！

商城项目商品列表页的渲染实现(含动图)相关推荐

最新文章

热门文章