购物商城项目的总结 - 随笔分类 - springxxxx

购物车组件Cart与Vuex的应用

摘要：点击“加入购物车”后，商品信息便被保存在product对象中了，而要想把product对象分享给购物车Cart组件，最好的办法就是将它加入到全局的vuex中。我们创建一个store文件夹，将index.js文件作为状态管理模块的入口，代码如下： import Vue from 'vue' impo 阅读全文

posted @ 2021-07-01 14:59 springxxxx 阅读(264) 评论(0) 推荐(0)

相似推荐的展示和底部导航条的实现思路

摘要：相似推荐的数据请求是独立的，对应的接口为“/recommend”。 export function getRecommend(){ return request({ url: '/recommend', }) } 仍然是在created函数中： // 3、获取推荐数据 getRecommend(). 阅读全文

posted @ 2021-06-30 00:00 springxxxx 阅读(56) 评论(0) 推荐(0)

DetailParamsInfo组件和DetailCommentInfo组件的实现思路

摘要：商品参数信息在返回data中的分布也很松散，将它们整合为一个类GoodsParam，然后将数据保存在GoodsParam的实例paramsInfo中，发送给子组件DetailParamsInfo： export class GoodsParam{ constructor(info,rule) { t 阅读全文

posted @ 2021-06-29 23:28 springxxxx 阅读(87) 评论(0) 推荐(0)

DetailShopInfo组件的实现思路

摘要：和之前一样，我们将该组件要使用的数据封装进一个Shop类： this.shop = new Shop(data.shopInfo); export class Shop{ constructor(shopInfo){ this.logo = shopInfo.shopLogo this.name = 阅读全文

posted @ 2021-06-29 18:01 springxxxx 阅读(128) 评论(0) 推荐(0)

DetailSwiper和DetailBaseInfo的实现思路

摘要：由于有现成的Swiper, SwiperItem可以使用，所以DetailSwiper的实现非常简单。首先获取轮播图片的数组topImages，数组中存放的是一张张图片的url。 this.topImages = data.itemInfo.topImages; 然后将topImages发送给子组阅读全文

posted @ 2021-06-29 17:11 springxxxx 阅读(95) 评论(0) 推荐(0)

跳转到Detail组件

摘要：我们在前面将每件商品的信息传给了GoodsListItem组件，保存在goodsItem变量中。并且每件商品有一个唯一的标识符iid。当点击该商品后，会跳转到该商品的详情页。所有的详情页使用同一个组件Detail，今天我们来回顾一下Detail组件的开发过程。首先需要配置路由，由于Detail组件阅读全文

posted @ 2021-06-29 16:45 springxxxx 阅读(233) 评论(0) 推荐(0)

保存页面状态的功能实现

摘要：在页面底部的MainTabBar组件中一共四个tag：Home、Cart、Category和Profile，对应路由表中的四个配置。当用户从Home切换到其它tag后，我们希望能保存下此时Home的状态，如滚动位置、高亮商品类别等。这样当用户再次回到Home页面时，看到的还是离开时的样子。事实上，阅读全文

posted @ 2021-06-27 16:09 springxxxx 阅读(145) 评论(0) 推荐(0)

显示商品列表+上拉加载更多+scroll组件使用的思路

摘要：首先我们需要确定如何存储获取到的商品数据。在后端定义的接口中，所有商品数据被分为new/pop/sell三类，它们互不影响。假设页面默认停留在new类商品，第一次请求（即页面初始化显示）时应该获取每一类商品的第1页。并且随着用户滚动页面，可以依次获取当前new类商品的第2、3……页数据。当用户通过点阅读全文

posted @ 2021-06-27 15:47 springxxxx 阅读(230) 评论(0) 推荐(0)

TabControl组件的实现思路

摘要：TabControl中包含三个表示分类的tag：流行（pop）、新款（new）和精选（sell）。当点击对应的tag后，下方显示的商品列表便会进行相应的切换。此外，TabControl组件还有一个重要的功能就是：当向下滚动到一定距离后，它会悬停在滚动区域的顶部。下面我们来依次实现这些功能。关于Ta 阅读全文

posted @ 2021-06-24 00:03 springxxxx 阅读(91) 评论(0) 推荐(0)

MainTabBar组件的实现思路

摘要：MainTabBar组件在软件下方展示了四个主选项卡：首页（Home）、分类（Category）、购物车（Cart）、我的（Profile），每个选项对应一个页面、一个组件。总体来看，MainTabBar可以看做由一个容器+若干个item组成，所以我们把单个item看做一个组件，把容器看作另一个组件阅读全文

posted @ 2021-06-23 22:43 springxxxx 阅读(151) 评论(0) 推荐(0)

HomeSwiper、RecommendView和FeatureView组件的使用

摘要：HomeSwiper是本项目的轮播图组件，它使用了两个现成的组件Swiper和SwiperItem，前者是对播放容器的设置，后者是对播放项目的设置。我们直接使用Swiper组件，在其内部通过v-for动态创建若干个SwiperItem，每个SwiperItem都是一张超链接图片。需要展示的图片存放阅读全文

posted @ 2021-06-18 23:23 springxxxx 阅读(144) 评论(0) 推荐(0)

DetailNavBar组件实现tag和滚动的双向联动

摘要：在Detail组件中使用DetailNavBar组件时，其center插槽中放置了四个tag：['商品', '参数', '评论', '推荐']。事实上，这四个tag分别对应详情页面的四个部分。现在我们希望点击某个tag，页面会自动滚动到对应的区域；反之，当页面滚动到某个区域时，对应的tag被高亮（字阅读全文

posted @ 2021-06-18 22:42 springxxxx 阅读(133) 评论(0) 推荐(0)

NavBar组件的实现思路

摘要：NavBar组件作为导航条，是最经常被复用的几个组件之一，下面来剖析一下它的实现过程： NavBar通常可以分为left/center/right三块，只是这三个位置具体填充什么，需要在使用时再传入。所以我们在这三个位置分别放入一个插槽。此外，为了便于添加默认的样式，故将每个插槽用div包裹起来。阅读全文

posted @ 2021-06-18 22:00 springxxxx 阅读(423) 评论(0) 推荐(0)

BackTop组件的实现思路

摘要：BackTop组件实现功能：回到页面顶部。并且只有当页面滚动到一定距离后，才显示出来。由于该组件在页面滚动时位置保持不变，所以采用fixed定位。给它绑定单击响应函数backClick()，由于绑定事件的操作只能对原生的html标签进行（给组件标签绑定无效），所以使用了.native修饰符，其作阅读全文

posted @ 2021-06-18 19:32 springxxxx 阅读(299) 评论(0) 推荐(0)

随笔分类 - 购物商城项目的总结