vue系列教程之微商城项目|商品购买

页面注册

1.新建页面 secondary/shopping.vue

2.注册页面，将页面与对应路由绑定

3.测试，点击主页中的商品购买路由跳转到shopping

引入顶部导航栏

效果图

编写商品卡片

不详述静态页面的编写，只说明思路.

1.新建商品卡片组件

2.商品信息通过props获取

3.为商品卡片添加点击事件，当该商品卡片被点击，通过this.$emit('函数名',参数),在父组件中通过 @函数名 监听商品卡片的点击事件.需要注意，这里的函数名只能是小写字符串，可以用-分割，参数只能有一个.

商品卡片组件

components/secondary/shopCard.vue

商品数据及属性说明

url:商品图片，title:商品标题，price:现价，org_orice:原价，buied:购买人数，comments:评论人数，

collect:收藏人数，position:商家所在地，child:商品详情图列表

请求数据并编写商品列表页面

请求数据

后端路由：'/goods'，get请求,无需请求参数

network/requets.vue 中追加以下内容

编写商品列表页面

1.引入商品卡片组件并使用,记得监听商品卡片的点击事件

2.布局编写可通过flex布局或者vant-ui的宫格组件实现布局

3.通过position定位给内容区设置固定高宽，并隐藏超出内容区的内容

4.引入请求函数，在created中发送数据请求，请求商品数据，并将数据渲染到页面上查看效果

5.将内容区初始化为better-scroll对象，需要注意的是，必须在watch中监听商品数据变化，通过this.$nextTick()确保数据渲染完成后，在进行better-scroll的初始化。如果不清楚原因可以回顾分类页面制作的文章.

商品列表页面

views/secondary/shopping.vue

本篇文章是该系列文章中的第十篇，讲述的是导航栏组件封装的相关操作步骤。下篇系列文章之导航栏与页面绑定正在制作之中，各位粉丝敬请期待。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）