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

最新推荐文章于 2024-05-24 17:24:45 发布

兜里揣着星星

最新推荐文章于 2024-05-24 17:24:45 发布

阅读量868

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/MCCLS/article/details/117884033

版权

本文详细介绍了如何利用Vant UI框架，分别实现轮播图、标签展示、宫格布局和底部标签栏的功能。通过引入Vue.js和Vant组件库，结合具体代码示例，展示了如何设置轮播图的自动播放、图片地址绑定，以及创建标签行和宫格项。同时，也演示了如何配置底部标签栏，包括各个图标和选项的设置。

摘要由CSDN通过智能技术生成

效果图：

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:''防止报错