lwcmall vue项目记录

这篇文章用于给我自己回顾用的，不建议大家观看，中间会跳过很多步骤

 先 vue create lwcmall，然后创建几个文件夹，搭建好最初的模子

搞个normalize.css和base.css文件

 引入base.css

 新建一个vue.config.js文件，配置一下路径别名

 配置代码规范

 1.先弄导航条

 

src里用别名要加上~符号 

做成这个样子

 第二部把首页搭建好

 先把上面的导航条做好

 设置好样式

为了让后面向下滚动的时候固定到最上方的位置

 

 接下来做轮播图

要用到axios

 创建一个home.js把所有的首页的请求都放在这里管理

 在组件创建时发出请求

 把res存下来

 res中数据太多了，先存一个banners，recommend

 接下来搞轮播图的内容

 

swiper-item里面预留了插槽的，到时候往里面插入banner数据就可以了，可以用v-for动态绑定

 但是在这些代码封装起来更加合适，搞一个homeswiper

 

 然后再home.vue中使用homeswiper

 接下来是推荐列表

 

 

 在home.vue使用recommendview

 给recommendview设置一下样式

 本周流行

就是一张图片

 在childcomps文件夹中再创建一个feature.vue文件

 引用一下

 给个样式

 做一个控制栏

 在home中使用

 调整一下样式

 接下来监听哪个文字被点击就高亮

 效果

 增加吸顶效果

 接下来做图片数据

 首先我们要把数据先请求过来，搞一个变量把流行，新款，精选都存下来，当点击不同文字的时候，现实出不同的数据，并且有下拉加载更多的时候，所以还要给一个page分页

 在首页发送请求

 create里面只放主要的要调用的方法，具体的逻辑代码，把他放到method里面去

 当进入首页的时候我把流行，新款，精选，都直接拿到第一页的数据

 通过扩展运算符把数据放到list里面去

 搞两个goodlist

 

 

 样式调整小组件的样式调整

  现在要让动态的点击流行，新款，精选从Tabcontrol传递到home里面去，从而改变数据，所以

 

better-scroll滚动

回到顶部按钮

 首页效果就差不多了