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>
