recommend.vue

<template>

    <div class="recommend">

    <h3 class="recommend-title">热卖推荐</h3>

    <ul class="recommend-list" >

      <li

        class="recommend-item"

        v-for="(item, index) in recommends"

        :key="index"

      >

        <router-link

          class="recommend-link"

          :to="{name: 'home-product', params: {id: item.baseinfo.itemId}}"

        >

          <p class="recommend-pic"><img class="recommend-img" :src="item.baseinfo.picUrlNew"></p>

          <p class="recommend-name">{{item.name.shortName}}</p>

          <p class="recommend-origPrice"><del>¥{{item.price.origPrice}}</del></p>

          <p class="recommend-info">

            <span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>

            <span class="recommend-count">{{item.remind.soldCount}}件已售</span>

          </p>

        </router-link>

      </li>

    </ul>

  </div>

</template>

<script>

import {getHomeRecommend} from 'api/home';

/* import MeLoading from 'base/loading'; */

export default {

    data(){

        return {

            name:'HomeRecommend',

            recommends:[],

            totalPage:1,

            curPage:1

        };

    },  

    created(){

      this.getRecommend();

    },

    methods:{

        getRecommend(){

            if(this.curPage>this.totalPage){

                retrun;

            }

            getHomeRecommend(this.curPage).then(data =>{

             if(data){

                 this.curPage++;

                 this.totalPage=data.totalPage;

                 this.recommends= this.recommends.concat(data.itemList);

             }

            });

        }

    }

}

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

  .recommend {

    &-title {

      position: relative;

      width: 100%;

      padding: 10px 0;

      font-size: $font-size-l;

      text-align: center;

      &:before,

      &:after {

        content: '';

        position: absolute;

        top: 50%;

        width: 40%;

        height: 1px;

        background-color: #ddd;

      }

      &:before {

        left: 0;

      }

      &:after {

        right: 0;

      }

    }

    &-list {

      @include flex-between();

      flex-wrap: wrap;

    }

    &-item {

      width: 49%;

      background-color: #fff;

      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

      margin-bottom: 8px;

    }

    &-link {

      display: block;

    }

    &-pic {

      position: relative;

      width: 100%;

      padding-top: 100%;

      margin-bottom: 5px;

    }

    &-img {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

    }

    &-name {

      height: 36px;

      padding: 0 5px;

      margin-bottom: 8px;

      line-height: 1.5;

      @include multiline-ellipsis();

    }

    &-origPrice {

      padding: 0 5px;

      margin-bottom: 8px;

      color: #ccc;

    }

    &-info {

      @include flex-between();

      padding: 0 5px;

      margin-bottom: 8px;

    }

    &-price {

      color: #e61414;

    }

    &-price-num {

      font-size: 20px;

    }

    &-count {

      color: #999;

    }

  }

  .loading-container {

    padding-top: 100px;

  }

</style>

home/index.vue

<template>

  <div class="home">

    <header class="g-header-container">

      <home-header></home-header>

    </header>

    <me-scroll>

      <home-slider></home-slider>

      <home-nav></home-nav>

      <home-recommend></home-recommend>

    </me-scroll>

    <div class="g-backtop-container"></div>

    <router-view></router-view>

  </div>

</template>

<script>

import HomeHeader from "./header";

import HomeSlider from "./slider";

import MeScroll from "base/scroll";

import HomeNav from "./nav";

import HomeRecommend from "./recommend";

export default {

  data() {

    return { name: "home" };

  },

  components: {

    HomeHeader,

    HomeSlider,

    MeScroll,

    HomeNav,

    HomeRecommend

  }

};

</script>

<style  lang="scss" scoped>

@import "~assets/scss/mixins";

.home {

  overflow: hidden;

  width: 100%;

  height: 100%;

  background-color: $bgc-theme;

}

</style>

scroll/index.vue

<template>

  <swiper :options="swiperOption" >

      <swiper-slide>

          <slot></slot>

      </swiper-slide>

      <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>

  </swiper>

</template>

<script>

import  {swiper,swiperSlide}  from 'vue-awesome-swiper';

export default {

    data(){

        return{

            name:'MeScroll',

            swiperOption:{

                direction:'vertical',

                slidesPerView:'auto',

                freeMode:true,

                setWrapperSize:true,

                scrollbar:{

                el:this.scrollbar?'.swiper-scrollbar':null,

                hide:true

                }

            }

        }

    },

    components:{

        swiper,

        swiperSlide

    },

    props:{

        scrollbar:{

            type:Boolean,

            default:true

        }

    }

}

</script>

<style lang="scss" scoped>

.swiper-container{

    overflow: hidden;

    width:100%;

    height: 100%;

}

.swiper-slide{

    height: auto;

}

</style>