Vue外卖五：首页图标导航加滑动分页swiper6用法

swiper相关文档

• 官网 www.swiper.com.cn
• s3使用说明 3.swiper.com.cn/usage/index.html
• s6使用 www.swiper.com.cn/usage/index.html
• 配置Api文档 www.swiper.com.cn/api/pagination/362.html
• vue专有用法 https://github.com/surmon-china/vue-awesome-swiper

1.安装swiper

因为生产环境也要用到所以要保存到项目 --save
不加版本号安装最新版本此处是6

安装最新版本
cnpm install --save swiper

安装指定版本
cnpm install --save swiper@4.2.6

2.使用前提template结构及类名

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

msite.vue实际代码

<!--首页导航-->
        <nav class="msite_nav">
          <div class="swiper-container">
            <div class="swiper-wrapper">
            
            <!--【1】第一滑动页-->
            
              <div class="swiper-slide">
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/1.jpg">
                  </div>
                  <span>甜品饮品</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/2.jpg">
                  </div>
                  <span>商超便利</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/3.jpg">
                  </div>
                  <span>美食</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/4.jpg">
                  </div>
                  <span>简餐</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/5.jpg">
                  </div>
                  <span>新店特惠</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/6.jpg">
                  </div>
                  <span>准时达</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/7.jpg">
                  </div>
                  <span>预订早餐</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/8.jpg">
                  </div>
                  <span>土豪推荐</span>
                </a>
              </div>
              
			<!--【2】第二滑动页-->
			
              <div class="swiper-slide">
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/9.jpg">
                  </div>
                  <span>甜品饮品</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/10.jpg">
                  </div>
                  <span>商超便利</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/11.jpg">
                  </div>
                  <span>美食</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/12.jpg">
                  </div>
                  <span>简餐</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/13.jpg">
                  </div>
                  <span>新店特惠</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/14.jpg">
                  </div>
                  <span>准时达</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/1.jpg">
                  </div>
                  <span>预订早餐</span>
                </a>
                <a href="javascript:" class="link_to_food">
                  <div class="food_container">
                    <img src="./images/nav/2.jpg">
                  </div>
                  <span>土豪推荐</span>
                </a>
              </div>
            </div>
            
            <!-- 【3】分页结构 放在container之外-->
            <div class="swiper-pagination"></div>
          </div>
        </nav>

3.script部分

import Swiper, { Pagination, Navigation } from 'swiper' //【1】引入swiper组件（脚本）
Swiper.use([Pagination, Navigation]) //【1.1】使用插件，必须写，否则分页器不显示
import 'swiper/swiper-bundle.min.css' //【2】引入swiper样式
export default{
	//【3】页面加载完成时需要运行的代码
	mounted(){
		//【4】创建一个Swiper对象，实现滑动轮播（以下用到的类型必须在template中存在）
		new Swiper('.swiper-container',{
			//【5】配置各项参数
			direction: 'horizontal', //水平切换； vertical:垂直切换选项
			loop: true, // 循环模式选项

			// 如果需要分页器
			pagination: {
			  el: '.swiper-pagination',
			  clickable:true,
			},

			/*// 如果需要前进后退按钮
			navigation: {
			  nextEl: '.swiper-button-next',
			  prevEl: '.swiper-button-prev',
			},

			// 如果需要滚动条
			scrollbar: {
			  el: '.swiper-scrollbar',
			},*/
		})
	},
	components:{
		TopHeader,
	}
}
</script>