vue-shop（five）

好久没有更新了自己的vue-shop项目也断更了大概1个月的时间主要6月份工作太忙没时间更荒废了一个月可惜啊！！！

vue-shop

在之前的文章当中自己写了项目的文件以及各种功能的大概代码，我自己也在自己的资源库当中上传了自己的项目。总的来生活这个项目还是有一些可圈可点的自己也有50天的时间没有接触自己的项目了略微有一点点生疏了。

猜你喜欢功能的实现

这个功能呢其实在淘宝、京东、天猫等网站都有也是现在网络上面主要运用的一个功能，根据大数据的信息来发觉我们所关注的点，找到类似的商品，方便了用户的挑选，也增加了商品的丰富性，提高了商品的售出。

<template>
  <div id="youLike" class="mr-tab-panel">
    <div class="like">
      <ul class="mr-avg-sm-2 mr-avg-md-3 mr-avg-lg-4 boxes">
        <li>
          <div class="i-pic limit">
            <img src="@/assets/images/shopcartImg.jpg">
            <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
            <p class="price fl">
              <b>¥</b>
              <strong>498.00</strong>
            </p>
          </div>
        </li>
        <li>
          <div class="i-pic limit">
            <img src="@/assets/images/shopcartImg.jpg">
            <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
            <p class="price fl">
              <b>¥</b>
              <strong>498.00</strong>
            </p>
          </div>
        </li>
        <li>
          <div class="i-pic limit">
            <img src="@/assets/images/shopcartImg.jpg">
            <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
            <p class="price fl">
              <b>¥</b>
              <strong>498.00</strong>
            </p>
          </div>
        </li>
        <li>
          <div class="i-pic limit">
            <img src="@/assets/images/shopcartImg.jpg">
            <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
            <p class="price fl">
              <b>¥</b>
              <strong>498.00</strong>
            </p>
          </div>
        </li>
        <li>
          <div class="i-pic limit">
            <img src="@/assets/images/shopcartImg.jpg">
            <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
            <p class="price fl">
              <b>¥</b>
              <strong>498.00</strong>
            </p>
          </div>
        </li>
        <li>
          <div class="i-pic limit">
            <img src="@/assets/images/shopcartImg.jpg">
            <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
            <p class="price fl">
              <b>¥</b>
              <strong>498.00</strong>
            </p>
          </div>
        </li>
        <li>
          <div class="i-pic limit">
            <img src="@/assets/images/shopcartImg.jpg">
            <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
            <p class="price fl">
              <b>¥</b>
              <strong>498.00</strong>
            </p>
          </div>
        </li>
        <li>
          <div class="i-pic limit">
            <img src="@/assets/images/shopcartImg.jpg">
            <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
            <p class="price fl">
              <b>¥</b>
              <strong>498.00</strong>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
    <!--分页 -->
    <ul class="mr-pagination mr-pagination-right">
      <li :class="{'mr-disabled':curentPage==1}" @click="jump(curentPage-1)"><a href="javascript:void(0)">&laquo;</a></li>
      <li :class="{'mr-active':curentPage==n}" v-for="n in pages" :key="n" @click="jump(n)">
        <a href="javascript:void(0)">{{n}}</a>
      </li>
      <li :class="{'mr-disabled':curentPage==pages}" @click="jump(curentPage+1)"><a href="javascript:void(0)">&raquo;</a></li>
    </ul>
    <div class="clear"></div>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        items: [],
        eachNum: 4,//每页显示个数
        curentPage: 1//当前页数
      }
    },
    mounted: function(){
      this.items = document.querySelectorAll('.like li');//获取所有元素
      for(var i = 0; i < this.items.length; i++){
        if(i < this.eachNum){
          this.items[i].style.display = 'block';//显示第一页内容
        }else{
          this.items[i].style.display = 'none';//隐藏其他页内容
        }
      }
    },
    computed: {
      count: function () {
        return this.items.length;//元素总数
      },
      pages: function () {
        return Math.ceil(this.count/this.eachNum);//总页数
      }
    },
    methods: {
      jump: function (n) {
        this.curentPage = n;
        if(this.curentPage < 1){
          this.curentPage = 1;//页数最小值
        }
        if(this.curentPage > this.pages){
          this.curentPage = this.pages;//页数最大值
        }
        for(var i = 0; i < this.items.length; i++){
          this.items[i].style.display = 'none';//隐藏所有元素
        }
        var start = (this.curentPage - 1) * this.eachNum;//每页第一个元素索引
        var end = start + this.eachNum;//每页最后一个元素索引
        end = end > this.count ? this.count : end;//尾页最后一个元素索引
        for(var j = start; j < end; j++){
          this.items[j].style.display = 'block';//当前页元素显示
        }
      }
    }
  }
</script>
<style src="@/assets/css/optstyle.css" scoped></style>
<style src="@/assets/css/infoStyle.css" scoped></style>

在template标签中编写商品列表区域的html的布局代码，用li标签显示商品的基本信息，包括商品的缩略图，商品价格和名称等内容，然后使用li标签进行数据信息的处理分页。
在script中编写商品信息分类的逻辑代码在data选项中定义每页显示的元素个数，通过计算机属性获取元素总数和总页数，在methods中定义jump方法通过页面元素的隐藏和显示，实现信息分页效果

选择卡切换效果实现

在我们的商品信息中可以看出来我们有三个选择，分别是宝贝详情，全部评价，猜你喜欢。

<template>
  <div class="introduceMain">
    <div class="mr-tabs" data-mr-tabs>
      <ul class="mr-avg-sm-3 mr-tabs-nav mr-nav mr-nav-tabs">
        <li id="infoTitle" :class="{'mr-active':current=='Details'}">
          <a @click="current='Details'">
            <span class="index-needs-dt-txt">宝贝详情</span></a>
        </li>

        <li id="commentTitle" :class="{'mr-active':current=='Comment'}">
          <a @click="current='Comment'">
            <span class="index-needs-dt-txt">全部评价</span></a>
        </li>

        <li id="youLikeTitle" :class="{'mr-active':current=='Like'}">
          <a @click="current='Like'">
            <span class="index-needs-dt-txt">猜你喜欢</span></a>
        </li>
      </ul>
      <div class="mr-tabs-bd">
        <component :is="current"></component>
      </div>
    </div>
    <div class="clear"></div>

    <div class="footer ">
      <div class="footer-hd ">
        <p>
          <a href="http://www.mingrisoft.com/" target="_blank">明日科技</a>
          <b>|</b>
          <a href="javascript:void(0)" @click="show">商城首页</a>
          <b>|</b>
          <a href="javascript:void(0)">支付宝</a>
          <b>|</b>
          <a href="javascript:void(0)">物流</a>
        </p>
      </div>
      <div class="footer-bd ">
        <p>
          <a href="http://www.mingrisoft.com/Index/ServiceCenter/aboutus.html" target="_blank">关于明日</a>
          <a href="javascript:void(0)">合作伙伴</a>
          <a href="javascript:void(0)">联系我们</a>
          <a href="javascript:void(0)">网站地图</a>
          <em>&copy; 2016-2025 mingrisoft.com 版权所有</em> </p>
      </div>
    </div>
  </div>
</template>
<script>
  import Details from '@/views/shopinfo/Details'//引入组件
  import Comment from '@/views/shopinfo/Comment'//引入组件
  import Like from '@/views/shopinfo/Like'//引入组件
  export default {
    name: 'introduce',
    data: function(){
      return {
        current: 'Details'	//当前显示组件
      }
    },
    components: {
      Details,
      Comment,
      Like
    },
    methods: {
      show: function () {
        this.$router.push({name:'home'});//跳转到主页
      }
    }
  }
</script>
<style src="@/assets/css/optstyle.css" scoped></style>
<style src="@/assets/css/infoStyle.css" scoped></style>

这里用到的就是一个简单的动态组件，将数据动态绑定。