Vue+Koa2移动电商实战 使用vue-awesome-swiper 制作商品推荐栏

Posted yang656

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+Koa2移动电商实战 使用vue-awesome-swiper 制作商品推荐栏相关的知识,希望对你有一定的参考价值。

今天我们要制作的是商品推荐栏,也就是下面的这个,这个是有一个滑动效果的

技术分享图片

首先还是来看我们的布局

html

    <!-- recommend goods area -->
    <div class="recommend_area">
      <div class="recommend_title">商品推荐</div>
      <div class="recommend_content">
        <swiper :options="swiperOption">
          <swiper-slide v-for=" (item ,index) in recommend_goods" :key="index">
            <div class="recommend_item">
              <img :src="item.image" width="80%">
              <div>{{item.goodsName}}</div>
              <div>¥{{item.price}} (¥{{item.mallPrice}})</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>

CSS:

  /*recommend_area*/
  .recommend_area {
    background: #fff;
    margin-top: .3rem;
  }

  .recommend_title {
    border-bottom: 1px solid #eee;
    text-align: center;
    font-size: 15px;
    color: #e5017d;
    padding: .3rem
  }

  .recommend_content {
    border-bottom: 1px solid #eee;
  }

  .recommend_item {
    width: 99%;
    border-right: 1px solid #eee;
    font-size: 12px;
    text-align: center;
  }

 

布局完成之后我们就要开始进入正题了

安装我们的vue-awesome-swiper了,在终端输入

npm install vue-awesome-swiper --save

安装完成后我们在页面进行引入

  import swiper/dist/css/swiper.css
  import {swiper,swiperSlide} from vue-awesome-swiper

这里我们因为使用的是从mock请求过来的数据,所以要使用axios进行数据交互

获取到我们的 recommend

this.recommend_goods = Response.data.data.recommend //商品推荐 
我们需要定义一个数据来接受这个从服务端请求过来的参数
recommend_goods: [],

awsome-swiper做这种推荐栏的时候我们还需要给他设置让它在一栏显示多少数据,如果不设置的话只会显示一个的,这里我们就让它一次性显示三个,然后可以左右滑动

 swiperOption:{
          slidesPerView:3
        },

  

今天我们的这节就算完成了,也是很简单的吧,主要是vue-awesome-swiper的安装和引入,然后就是些简单的数据交互啦

以上是关于Vue+Koa2移动电商实战 使用vue-awesome-swiper 制作商品推荐栏的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js+Koa2移动电商实战3

Vue.js+Koa2移动电商实战4

Vue+Koa2移动电商实战 使用vue-awesome-swiper 制作商品推荐栏

Vue+Koa2移动电商实战 mock数据使用和布局

Vue+Koa2移动电商实战 密码加密

Vue.js+Koa2移动电商实战2