vue+vant移动端入门实现2（仿网易严选）

效果图：

1.实现轮播图

（1）运用vant框架上的,swipe（轮播）实现

import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

设置数组：这边直接通过获取图片的地址来进行轮播

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组件进行设计

 

      
      
        
        网易包管品牌
        
        30天无忧退货
        
        48小时快速退货
      

.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);

      
        
        
        
{
    {n.good_text}}
        
      

数组：注意这边要把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);

      
        标签
        标签
        标签
        标签
      

要设置active:''防止报错