前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >22、商品列表页

22、商品列表页

作者头像
Ewall
发布2018-09-04 15:48:29
1.9K0
发布2018-09-04 15:48:29
举报
文章被收录于专栏:vue学习

前言:本章主要是商品列表页的一个基本布局讲解。(具体效果请下滑到底部) Github:https://github.com/Ewall1106/mall(请选择分支chapter22)

1、新建goodList.vue页面

(1)新建文件 > 然后编写vue页面的一个基本结构

新建goodList.vue

(2)然后我们就去router中注册goodList路由

router路由.png

2、编写商品列表页

(1)头部标题

  • 头部跟classify.vue页面的头部栏大同小异,所以你也可以抽离成一个组件;其次,对于title名的话应该是由路传参带过来的、是动态的,所以我们用模板语法包起来。

获取上级页面传过来的路由参数

  • ok,现在我们回过头返回到classify.vue分类页面添加路由跳转函数并在参数中携带title

classify.vue中添加点击事件

click事件

  • 这样,我们从上一级点击进来的名字就赋到商品列表的title了:

头部标题

对这部分路由传参还不熟的可参考v-router之什么是编程式路由

(2)筛选工具栏

筛选工具栏

(3)商品列表

对于商品列表我们可以把里面的单个商品item用封装成一个组件从而实现复用。

  • components文件夹下新建goodItem.vue组件

新建goodItem.vue组件

  • 引入组件并完善商品列表页面样式,这就是我们商品列表页的一个基本呈现:

基本效果

3、小结

主要是一个html+css的基本布局,下一章渲染下把mock数据到页面,然后着重讲下父子组件之间的传值。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.08.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、新建goodList.vue页面
  • 2、编写商品列表页
  • 3、小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档