Vue商城项目(三)

今天主要完成的首页上一个组件的封装
在这里插入图片描述
主要完成的就是最下方的那个组件的封装,这个内容,我并没有再重复写以便,主要的就是放了一张图片,然后点击跳转一个链接,仅此而已,虽然这么简单,但是也不能直接写在首页里面,所以也简单做了一个封装!
home文件夹下新建了一个FeatureView.vue文件用于它的封装
整体的思路非常简单,就是外层套了一个a标签链接,里面放了一个span放图片,虽然很简单,但也是一个独立的模块,所以也做了个封装
FeatureView.vue

<template>
  <div class="feature">
    <a href="https://act.mogujie.com/zzlx67">
      <img src="~assets/img/home/recommend_bg.jpg" alt="">
    </a>
  </div>
</template>

<script>
export default {
  name:"FeatureView",
  data(){
    return {
    }
  },
  methods:{},
  props:{},
  components:{},
  watch:{},
  computed:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
  .feature img{
    width: 100%;
  }
</style>

然后在home.vue中注册使用就可以了。

接着又对一个首页的控制栏做了一个封装
在这里插入图片描述

这么一个东西看似很简单,但是不可能只在首页中进行使用,也会在分类中进行使用,所以也做了一个封装!
但是这个组件很可能只在这一个项目中进行使用,在其他项目中可能就不再使用了,所以在components文件夹下的content文件夹中建立一个vue文件,这样布局文件而并不是随意放置文件,会为后期的维护节省很多时间,不然后期可能会相当头疼!
新建一个tabControl文件夹,里面放了一个TabControl.vue文件

TabControl.vue

<template>
  <div class="tab-control">
    <div v-for="(item,index) in titles" :key="item.background" 
          class="tab-control-item" :class="{active:index===currentIndex}" @click="itemClick(index)">
      <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name:"TabControl",
  data(){
    return {
      currentIndex:0,
    }
  },
  methods:{
    itemClick(index){
      this.currentIndex = index;
    }
  },
  props:{
    titles:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  components:{},
  watch:{},
  computed:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
  .tab-control{
    display: flex;
    font-size: 14px;
    text-align: center;
    background-color: rgb(222, 241, 228);
  }

  .tab-control-item{
    flex: 1;
    height: 40px;
    line-height: 40px;
  }
  .tab-control-item span{
    padding: 5px;
  }

  .active{
    color: var(--color-high-text);
  }
  .active span{
    border-bottom: 3px solid var(--color-tint);
  }
</style>

在这里我在props中设置了一个titles,是一个数组!你可能会有所疑惑为社么不用插槽呢?这个我考虑了一下,主要是我在做这个的时候发现其实只有文字不一样,而不像导航栏那样图标和数量都不一样,所以我在props中传入了一个数组,这样只需要用户传入文字就可以了,而没有必要去使用插槽了!这里我同样采用了flex布局,使得他们均匀分布,简单调整了一下样式!
当我点击到哪一个样式的时候,我希望文字变成红色,就是说,点击流行的时候,流行变成红色,点击精选的时候,精选变成红色,所以设置了
“<div v-for="(item,index) in titles" :key=“item.background”
class=“tab-control-item” :class="{active:index===currentIndex}" @click=“itemClick(index)”>”

data中currentIndex初始值为0,就是下标值为0,这样我们只需要一个ItemClick这个函数来传入点击的index即可,然后动态绑定了class,点击哪一个标题时,哪一个就变红!

.tab-control{
    /* 会根据top的值,自动将position的值改为fixed 移动端适用很好,但是ie这些就不兼容了 */
    position: sticky;
    top: 44px;
  }

我这里为什么要这么设置一下样式呢?
看下面的样式,当我们向下滑动的时候,我希望“流行,新款,精选”可以置顶
在这里插入图片描述

在这里插入图片描述
所以我就设置了这么个属性,当top达到44px的时候,position的值会自动改为fixed,当然这么容易就实现了就会产生很难顶的兼容性问题,兼容霸王IE,毫无疑问,IE是不支持这个属性的,但是就不专门针对它做适配了!
接着下面就需要展示“流行,新款,精选”里面的内容了!
这个里面的数据我们是需要从后端拿到的,这里面的数据当然是非常复杂的!
所以进行了简单的设计,goods里面中保存了三类数据(流行,新款,精选)goods中保留了三个对象,‘pop' 'news','sell',在每一个对象中有page,默认为1,表示第一页,有一个list数组用于放数据

data(){
    return {
      goods:{
        'pop':{page:0,list:[]},
        'news':{page:0,list:[]},
        'sellnp':{page:0,list:[]},
      }
    }
  },

每个对象的数据都可能是不同的,所以需要每个都单独进行设置!

<p style="font-size:16px;"> <span style="color:#333333;">此课程为第一课,学完第一课可以继续学习第二节课的内容</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">对要完成的案例的分析</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">通过脚手架创建Vue框架项目以及模块的划分</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">搭建python语言的Django框架的项目为前端传递所需要的数据</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">创建好首页,商品模块,购物车模块,订单模块,个人中心模块</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">创建各个模块的路由,让各个模块可以正常的运行起来</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">开发首页模块,导入触摸滑动的组件</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">开发商品分类模块,通过axios组件进行前后端的数据通信</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">首页导入触摸滑块插件</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">python端书写要返回前端的商品分类的数据</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">axios通过get请求从后端获取数据</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">通过axios把商品分类的数据从后端获取,并且渲染</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">书写python端返回前端数据的业务代码</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">商品列表部分的数据从后端获取再渲染</span> </p> <p style="font-size:16px;"> <span style="color:#333333;">布局商品列表的组件以及购物车的组件</span> </p> <p style="font-size:16px;"> <span style="color:#333333;"><br /> </span> </p> <p style="font-size:16px;"> <span style="color:#333333;"><br /> </span> </p> <p style="font-size:16px;"> <br /> </p>
相关推荐
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">代码和ppt均可下载!</span><br /> <br /> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用。</span> </p> <p> <img src="https://img-bss.csdn.net/202001090736032736.png" alt="" /><img src="https://img-bss.csdn.net/202001090736166806.png" alt="" /><img src="https://img-bss.csdn.net/202001090736273968.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页