在安装了 vue 的前提下, 打开命令行窗口, 输入 vue init webpack swiper-test, 创建一个 vue 项目且名为 swiper-test(创建速度可能会有点慢, 耐心等), 博文讲完后, 源码托管在 GitHub 中, 供下载并理解.
vue 项目自动生成完毕后, 继续在命令行窗口输入 cd swiper-test, 将目录切换到 swiper-test.
下面就开始启动 vue 项目了, 输入启动命令行: NPM run dev.
打开浏览器输入网址: localhost:8080
环境搭好了, 进入主题, 要想引入 vue-awsome-swiper 插件, 还得下载 vue-awesome-swiper 模块包, 我是通过 NPM 来下载的, 虽然很慢, 但我有耐心. 在 swiper-test 目录下打开命令行窗口, 输入 NPM install vue-awesome-swiper --save. 若正常的话, node_modules 文件夹中就有 vue-awesome-swiper 文件夹以及相关文件生成.
我用开发工具 Hbuilder 打开 swiper-test 项目, 找到目录 src/main.JS, 开始编辑代码, 引入 vue-awesome-swiper 模块:
import VueAwesomeSwiper from "vue-awesome-swiper";
使用模块:
Vue.use(VueAwesomeSwiper);
图下:
引入了结构, 没有样式怎么行, 所以, 找到目录 src/App.vue, 开始编辑, 在 < script > 标签里添加这么一行:
import "swiper/dist/CSS/swiper.css";
图下:
App.Vue 文件中, 为了预览效果, 把第三行的代码注释掉,<img src="./assets/logo.png">一般按 ctrl+/ 就可以注释
在目录 src/components 下创建 swiper.Vue 文件, 编辑此文件, 可以直接使用 swiper 组件:<swiper></swiper>
关于 swiperOption 的配置问题, 可以去 swiper 官网了解: https://www.swiper.com.cn/api/ , 在这里, 介绍的比谁都牛逼!
swiper.vue 内容如下:
- <template>
- <div class="swiper-plugs">
- <swiper :options="swiperOption" refs="lwSwiper">
- <swiper-slide>
- <img src="../assets/logo.png" alt="" />
- </swiper-slide>
- <swiper-slide>
- <img src="../assets/logo.png" alt="" />
- </swiper-slide>
- <swiper-slide>
- <img src="../assets/logo.png" alt="" />
- </swiper-slide>
- <!-- 分页器 -->
- <div class="swiper-pagination" slot="pagination"></div>
- <!-- 前进后退按钮 -->
- <div class="swiper-button-prev" slot="button-prev"></div>
- <div class="swiper-button-next" slot="button-next"></div>
- <!-- 滚动条 -->
- <div class="swiper-scrollbar" slot="scrollbar"></div>
- </swiper>
- </div>
- </template>
- <script>
- export default{
- data(){
- return {
- swiperOption: {
- autoplay : {
- disableOnInteraction: false, // 用户操作后是否禁止自动循环
- delay: 1000 // 自动循环时间
- }, // 可选选项, 自动滑动
- speed: 1000, // 切换速度, 即 slider 自动滑动开始到结束的时间(单位 ms)
- loop:false, // 循环切换
- grabCursor: false, // 设置为 true 时, 鼠标覆盖 Swiper 时指针会变成手掌形状, 拖动时指针会变成抓手形状
- // setWrapperSize: true, //Swiper 使用 flexbox 布局(display: flex), 开启这个设定会在 Wrapper 上添加等于 slides 相加的宽或高, 在对 flexbox 布局的支持不是很好的浏览器中可能需要用到.
- autoHeight: true, // 自动高度. 设置为 true 时, wrapper 和 container 会随着当前 slide 的高度而发生变化.
- scrollbar: '.swiper-scrollbar',// 显示滚动条
- mousewheelControl: true, // 设置为 true 时, 能使用鼠标滚轮控制 slide 滑动
- observeParents: false, // 当改变 swiper 的样式 (例如隐藏 / 显示) 或者修改 swiper 的子元素时, 自动初始化 swiper
- pagination: {
- el: '.swiper-pagination',
- // type : 'progressbar', // 分页器形状
- clickable :true, // 点击分页器的指示点分页器会控制 Swiper 切换
- },
- navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
- },
- }
- }
- }
- }
- </script>
- <style>
- </style>
想预览效果啥办? 那就得给一个路由规则了, 打开目录 src/router/index.JS, 往 routes 数组添加一组路由规则.
index.JS 修改后的内容:
- import Vue from 'vue'
- import Router from 'vue-router'
- import HelloWorld from '@/components/HelloWorld'
- import swiper from '@/components/swiper'
- Vue.use(Router)
- export default new Router({
- routes: [
- {
- path: '/',
- name: 'HelloWorld',
- component: HelloWorld
- },
- {
- path:'/swiper',
- name:'swiper',
- component:swiper
- }
- ]
- })
打开浏览器, 网址输入: http://localhost:8080/#/swiper
到这, 就基本上有轮播效果了, 但是, 有个要注意的是, 图片每次轮播都调用调用事件, 导致页面性能低, 所以, 就给了一个计算属性, 大大简化了运算.
swiper.vue 最终的修改:<template>
- <div class="swiper-plugs">
- <swiper :options="swiperOption" refs="lwSwiper">
- <swiper-slide>
- <img src="../assets/logo.png" alt="" />
- </swiper-slide>
- <swiper-slide>
- <img src="../assets/logo.png" alt="" />
- </swiper-slide>
- <swiper-slide>
- <img src="../assets/logo.png" alt="" />
- </swiper-slide>
- <!-- 分页器 -->
- <div class="swiper-pagination" slot="pagination"></div>
- <!-- 前进后退按钮 -->
- <div class="swiper-button-prev" slot="button-prev"></div>
- <div class="swiper-button-next" slot="button-next"></div>
- <!-- 滚动条 -->
- <div class="swiper-scrollbar" slot="scrollbar"></div>
- </swiper>
- </div>
- </template>
- <script>
- export default{
- data(){
- return {
- swiperOption: {
- autoplay : {
- disableOnInteraction: false, // 用户操作后是否禁止自动循环
- delay: 1000 // 自动循环时间
- }, // 可选选项, 自动滑动
- speed: 1000, // 切换速度, 即 slider 自动滑动开始到结束的时间(单位 ms)
- loop:false, // 循环切换
- grabCursor: false, // 设置为 true 时, 鼠标覆盖 Swiper 时指针会变成手掌形状, 拖动时指针会变成抓手形状
- // setWrapperSize: true, //Swiper 使用 flexbox 布局(display: flex), 开启这个设定会在 Wrapper 上添加等于 slides 相加的宽或高, 在对 flexbox 布局的支持不是很好的浏览器中可能需要用到.
- autoHeight: true, // 自动高度. 设置为 true 时, wrapper 和 container 会随着当前 slide 的高度而发生变化.
- scrollbar: '.swiper-scrollbar',// 显示滚动条
- mousewheelControl: true, // 设置为 true 时, 能使用鼠标滚轮控制 slide 滑动
- observeParents: false, // 当改变 swiper 的样式 (例如隐藏 / 显示) 或者修改 swiper 的子元素时, 自动初始化 swiper
- pagination: {
- el: '.swiper-pagination',
- // type : 'progressbar', // 分页器形状
- clickable :true, // 点击分页器的指示点分页器会控制 Swiper 切换
- },
- navigation: {
- nextEl: '.swiper-button-next',
- prevEl: '.swiper-button-prev',
- },
- }
- }
- },
- computed:{
- swiper(){
- return this.$refs.lwSwiper.swiper;
- }
- }
- }
- </script>
- <style>
- </style>
还有注意的是, 在控制台中, 莫名其妙出现大量警告信息. 找到目录 build/webpack.base.conf.JS, 把 43 行注释掉:...(config.dev.useEslint ? [createLintingRule()] : []), 保存文件, 退出当前运行环境, 重新输入启动命令行: NPM run dev
GitHub 源码网址: https://github.com/murenziwei/swipertest
来源: https://www.cnblogs.com/murenziwei/p/10430206.html