标签：vue item 数据 进入 top axios 请求 ons 简单
今天我们要制作的是商品推荐栏，也就是下面的这个，这个是有一个滑动效果的
首先还是来看我们的布局
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+Koa2移动电商实战 （六）使用vue-awesome-swiper 制作商品推荐栏
标签：vue item 数据 进入 top axios 请求 ons 简单
原文地址：https://www.cnblogs.com/yang656/p/10020539.html
