使用vue-awesome-swiper实现幻灯片组件开发
vue的swiper组件
1、安装 swiper 和 vue-awesome-swiper 插件
cnpm install swiper vue-awesome-swiper --save
(截图里只安装了vue-awesome-swiper,后面我又安装了swiper,大家自己补充下)
2、在 components目录下,创建slider目录,导入图片素材,创建index.vue
<template> <swiper ref="myswiper" :options="swiperoptions"> <swiper-slide v-for="(slider,index) in sliders" :key="index"> <a :href="slider.linkurl"> <img :src="slider.imgurl"> </a> </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> </swiper> </template> <script> import { swiper, swiperslide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; export default { name:"slider", title: 'autoplay', components:{ swiper, swiperslide }, data() { return { sliders:[ { index:0, linkurl:'www.baidu.com', imgurl:require('./1.jpg') },{ index:0, linkurl:'www.baidu.com', imgurl:require('./2.jpg') },{ index:0, linkurl:'www.baidu.com', imgurl:require('./3.jpg') },{ index:0, linkurl:'www.baidu.com', imgurl:require('./4.jpg') } ], swiperoptions: { spacebetween: 30, centeredslides: true, autoplay: { delay: 2500, disableoninteraction: false }, loop: true, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextel: '.swiper-button-next', prevel: '.swiper-button-prev' } } } }, computed: { swiper() { return this.$refs.myswiper.$swiper; } }, mounted() { console.log('current swiper instance object', this.swiper); this.swiper.slideto(3, 1000, false); } } </script> <style lang="scss" scoped> .swiper-container{ width:100%; height:180px; } .swiper-slide a{ display:block; width:100%; height:100%; & img{ width:100%; height:100%; } } </style>
3、创建pages/home/index.vue,引入slider组件
<template> <div class="home"> <slider/> </div> </template> <script> import slider from 'components/slider'; export default { name:"home", components:{ slider } } </script>
4、添加路由 src/router/index.js
import vue from 'vue' import router from 'vue-router' import home from 'pages/home' vue.use(router) export default new router({ routes: [ { path: '/', name: 'home', component: home } ] })
效果图
需要注意的是:
如果在 dom 结构中的某个 dom 节点使用了 v-if、v-show 或者 v-for(即根据获取到的后台数据来动态操作 dom,即响应式),那么这些 dom 是不会在 mounted 阶段找到的。
mounted 阶段,一般是用于发起后端请求,获取数据,配合路由钩子做一些事情。简单来说就是在 mounted 钩子中加载数据而已,加载回来的数据是不会在这个阶段更新到 dom 中的。所以在 mounted 钩子中使用 $refs,如果 ref 是定位在有 v-if、v-for、v-show 的 dom 节点中,返回来的只能是 undefined,因为在 mounted 阶段他们根本不存在。
如果说 mounted 阶段是加载阶段,那么 updated 阶段则是完成了数据更新到 dom 的阶段(对加载回来的数据进行处理),此时,再使用 this.$refs.xx,就 100% 能找到该 dom 节点。
updated 与 mounted 不同的是,在每一次的 dom 结构更新,vue.js 都会调用一次 updated 钩子函数!而 mounted 钩子函数仅仅只执行一次而已。
因此修改mouted为updated如下: