Swiper6的基本使用

好久不用Swiper今天使用一下，发现竟然更新到6了，然后就开始了各种坑，避坑指南，给自己以后使用作参考。
俗话说：好记性不如烂笔头。

Swiper6

出现坑的最大原因是：
1.在第六版导入只能导入swiper核心内容，而部分组件效果如分页器需要单独导入
2.css引用已经与5 的版本不同，css的样式已经不在dist中了

Use Swiper from npm

下载(默认为最新版本，此文为6)
npm install swiper --save

引用（1号坑）

import Swiper, { Pagination, Navigation, Autoplay } from 'swiper' // js 模块
import 'swiper/swiper-bundle.css' // css 模块
Swiper.use([Pagination, Navigation, Autoplay])

html部分
filmswiper

<div class="swiper-container filmswiper"><div class="swiper-wrapper"><slot></slot>//此处写了插槽</div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div></div>

swiper初始化（2号坑）
filmswiper 是自己起的名字用于区别组件，这例子就是基本使用，需要继续优化才能成为一个真正的组件

 mounted () {// eslint-disable-next-line no-unused-varsconst swiper = new Swiper('.filmswiper', {// direction: 'vertical',loop: true,centeredSlides: true,// 如果需要分页器pagination: {el: '.swiper-pagination',clickable: true // 允许分页点击跳转},autoplay: {delay: 2000,disableOnInteraction: false},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}})}

2号坑解释

1.eslint 下直接new 报错 Do not use ‘new’ for side effects no-new
传给变量

var swiper = new Swiper(....

又警告 Swiper 从没被使用过
new 上一行写 /* eslint-disable no-new */ 绕过```

/* eslint-disable no-new */

可以将上面看做是一个组件页面，下面在另一个页面引用

引用

// 这里写自己正确的路径
import swiper from '@/views/Film/Swiper'

注册组件(局部组件)

components: {swiper},

页面中使用(模拟接口中调用的数据)（3号坑）
此处有小伙伴评论：调用后出不来小圆点，也不能自动轮播，
原因可能是你没加 class='swiper-slide'这也是swiper的结构

<!-- 解决 swiper 初始化过早的问题  :key='loopList.length'-->
<swiper :key='loopList.length'><div class='swiper-slide slide' v-for='data in loopList' :key="data.id"><img :src="data.img | filterImg"/></div>
</swiper>

script 部分

<script>
import swiper from '@/views/Film/Swiper'
import axios from 'axios'
export default {components: {swiper},data () {return {loopList: []}},filters: {filterImg: (data) => {return data.replace('w.h', '400.160')}},mounted () {axios.get(‘XXXXXX这里写请求的地址Xxxx’).then(res => {this.loopList = res.data.movieList}).catch(err => {console.log(err)})}
}

Use Swiper from CDN

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"><script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Use ES modules in browser

<script type="module">import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'const swiper = new Swiper(...)
</script>

写在最后

敲一遍，立马就体会到啦！多动手总是没得错的，今天也要加油噢。

Swiper6的基本使用相关推荐

swiper6.0改造 “翻页按钮”：自定义style样式和position - 案例篇
文章目录 swiper6.0改造 "翻页按钮":自定义style样式和position(含效果图.代码.使用手册) 需求场景 · 描述如下: 效果图 · gif 动画: 注意事项: ...
vue swiper6版本 navigation不起作用小坑
初用vue-awesome-swiper,通过官网步骤下载插件, 正常设置轮播图,但是卡在了一个小bug上,左右点击按钮无效,查询资料不断调试,最后发现原来是swiper版本的坑,官网直接下载的是最新 ...
vue3 seo prerender-spa-plugin swiper6 vue-router4 build 打包空白图片压缩
版本依赖 vue3.vue-cli4. vue-router4.swiper6.prerender-spa-plugin3.image-webpack-loader7 "dependenci ...
如何在vue中使用swiper6,解决Mousewheel失效
首先我们需要指定版本安装swiper (本人安装的是swiper6.4.5,各个版面都有些许配置上的区别版本不同可能会出现某些控件不生效) npm install swiper@6.4.5 --sa ...
Vue外卖五：首页图标导航加滑动分页swiper6用法
swiper相关文档官网 www.swiper.com.cn s3使用说明 3.swiper.com.cn/usage/index.html s6使用 www.swiper.com.cn/usage ...
vue中使用swiper，vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper 在刚开始vue中使用swiper的时候,按照文档默认下载的是swiper6,这个版本有很多坑,比如 ...
React使用Swiper实现3D coverflow 效果
下面是.ts文件代码 import React, { useEffect } from 'react'; import classnames from 'classnames'; import { R ...
vue3中使用swiper7轮播图插件
文章目录项目场景: 普通vue3项目: vue3+typeScript项目: 组件样式修改: 关于垂直方向: 关于自动播放: 关于无限循环: 关于获取swiper实例: 项目场景: 前不久刚在我的v ...
Swiper轮播图插件之如何修改前进后退按钮swiper-button-prev和swiper-button-next的默认样式
第一步: 在轮播图最外层的容器中将原本前进后退按钮的大小设置为0 注意: Swiper6之前的默认容器是'.swiper-container',Swiper7之后的默认容器是'.swiper'. .s ...

Swiper6的基本使用

Swiper6

Use Swiper from npm

2号坑解释

Use Swiper from CDN

Use ES modules in browser

写在最后

Swiper6的基本使用相关推荐

最新文章

热门文章