效果图:
1.实现轮播图
(1)运用vant框架上的,swipe(轮播)实现
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
<!--轮播图 -->
<van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
<van-swipe-item v-for="(n,inx) in imgObj" :key="inx" >
<img :src="n" />
</van-swipe-item>
</van-swipe>
设置数组:这边直接通过获取图片的地址来进行轮播
imgObj:[
'https://yanxuan.nosdn.127.net/9ed62a99ff7cc6e66225183c84ac4213.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95',
'https://yanxuan.nosdn.127.net/3297667a12ee6b8f6203ff81754dd1cd.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95',
'https://yanxuan.nosdn.127.net/31fa72fdf89cc2b7ebfd46dd668560d6.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95',
'https://yanxuan.nosdn.127.net/403ef629810368c9b3e0e6fd863ebb4e.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95'
]
2.实现轮播图下标签
与上面类似使用layout组件进行设计
<!--滚图下标签-->
<van-row class="service_info">
<van-col span="8">
<i class="icon icon_1"></i>网易包管品牌</van-col>
<van-col span="8">
<i class="icon icon_2"></i>30天无忧退货</van-col>
<van-col span="8">
<i class="icon icon_3"></i>48小时快速退货</van-col>
</van-row>
.service_info{
text-align:center;
height:1.2rem;
line-height:1.2rem;
}
.service_info i.icon{
display:inline-block;
background-repeat:no-repeat;
background-size:100%;
width:.5rem;
height:.5rem;
vertical-align:middle;
}
.service_info i.icon.icon_1{
background-image:url('../assets/service_info_1.png');
}
.service_info i.icon.icon_2{
background-image:url('../assets/service_info_2.png');
}
.service_info i.icon.icon_3{
background-image:url('../assets/service_info_3.png');
}
3.实现宫格
使用vant框架的宫格组件(grid)
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
Vue.use(Grid);
Vue.use(GridItem);
<!--宫格-->
<van-grid :column-num="5">
<van-grid-item v-for="(n,inx) in good_icon" :key="inx">
<img :src="n.imgurl">
<div>{{n.good_text}}</div>
</van-grid-item>
</van-grid>
数组:注意这边要把data里面图片设置为数据源才能获取到图片(加一个require)
good_icon:[
{
imgurl:require('../assets/good_icon1.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon2.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon3.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon4.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon5.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon6.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon7.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon8.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon9.png'),
good_text:'新品首发'
},{
imgurl:require('../assets/good_icon10.png'),
good_text:'新品首发'
}
]
4.实现浮底
使用vant框架的tabber(标签栏)
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
<!--浮底-->
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">标签</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
要设置active:''防止报错