siwper vue 上下滑动分页_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

1.安装swiper

因为生产环境也要用到所以要保存到项目 --save

不加版本号安装最新版本此处是6

安装最新版本

cnpm install --save swiper

安装指定版本

cnpm install --save swiper@4.2.6

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

Slide 1

Slide 2

Slide 3

导航等组件可以放在container之外

msite.vue实际代码

甜品饮品

商超便利

美食

简餐

新店特惠

准时达

预订早餐

土豪推荐

甜品饮品

商超便利

美食

简餐

新店特惠

准时达

预订早餐

土豪推荐

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,

}

}