效果图：

讯享网

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/9ed62a99ff7cc6ec84ac4213.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95', 'https://yanxuan.nosdn.127.net/a12ee6b8f6203ff81754dd1cd.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95', 'https://yanxuan.nosdn.127.net/31fa72fdf89cc2b7ebfd46ddd6.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95', 'https://yanxuan.nosdn.127.net/403efc9b3e0e6fd863ebb4e.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:''防止报错