Vue实现有分页的icon轮播区域

用Vue仿造去哪儿App时,首页中间有一个Icon区域。如下图
Vue实现有分页的icon轮播区域_第1张图片
这个区域可以看到8个图标,但它并不止8个,还能滑动翻到下一页。
滑动轮播可以使用vue-awesome-swiper,按照github上的指引操作,非常简单的就实现了轮播图效果。

1.首先来实现这个区域的布局。

HTML

 <div class="icons">
      <swiper>
       
         <swiper-slide>
          <div class="icon">
            <div class="icon-img">
              <img  src="图片地址" class="icon-img-content">
            div>
            <p class="icon-desc">景点门票p>
          div>
        swiper-slide>
         
        <swiper-slide>
          <div class="icon">
            <div class="icon-img">
              <img  src="图片地址" class="icon-img-content">
            div>
            <p class="icon-desc">景点门票p>
          div>
        swiper-slide>
        
                    

你可能感兴趣的:(Vue,Vue)