vue 注册全局swiper_vue项目全局引入vue-awesome-swiper插件做出轮播效果

最新推荐文章于 2023-11-01 16:59:50 发布

weixin_39679370

最新推荐文章于 2023-11-01 16:59:50 发布

阅读量436

点赞数

文章标签： vue 注册全局swiper

本文链接：https://blog.csdn.net/weixin_39679370/article/details/113022260

版权

本文介绍了如何在Vue项目中通过vue-awesome-swiper插件创建轮播效果。首先，通过vue init webpack创建项目，然后安装vue-awesome-swiper。在src/main.js中引入模块并注册，同时在App.vue中引入样式。接着，在components中创建swiper.vue组件，配置swiperOption，并在router/index.js中添加路由规则。最后，通过计算属性优化性能，解决控制台警告信息。

摘要由CSDN通过智能技术生成

在安装了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，开始编辑，在

import "swiper/dist/css/swiper.css";

图下：

app.Vue文件中，为了预览效果，把第三行的代码注释掉，一般按ctrl+/就可以注释

在目录src/components下创建swiper.Vue文件，编辑此文件，可以直接使用swiper组件：

关于swiperOption的配置问题，可以去swiper官网了解：https://www.swiper.com.cn/api/，在这里，介绍的比谁都牛逼！

swiper.vue内容如下：

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',

}

想预览效果啥办？那就得给一个路由规则了，打开目录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最终的修改：