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如下：
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论