swiper vue 切换到指定_vue使用swiper实现左右滑动切换图片代码示例

本篇文章小编给大家分享一下vue使用swiper实现左右滑动切换图片代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

使用npm 安装vue-awesome-swiper

npm install vue-awesome-swiper --save

在main.js中引用

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.user(VueAwesomeSwiper)

import 'swiper/dist/css/swiper.css'

在组件中使用

{{ time }}

import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {

name: "PictureComponent",

props: ["data", "maxShow", "time"],

data() {

return {

centerDialogVisible: false,

showPic: "",

isDialogShow: false,

activeIndex: 1,

startX: 0,

swiperOption: {

width: window.innerWidth,

zoom: true,

initialSlide: 0

}

};

},

computed: {

images() {

if (this.data instanceof Array && this.data.length > 2) {

var value = this.data;

return value.splice(0, this.maxShow);

} else {

return this.data;

}

}

},

components: {

swiper,

swiperSlide

},

methods: {

// 放大图片

enlargePic(i) {

this.activeIndex = i;

this.isDialogShow = true;

// 使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM节点，

// 返回来的只能是undefined，因为在mounted阶段他们根本不存在

this.$nextTick(() => {

var swiper = this.$refs.mySwiper.swiper;

swiper.activeIndex = i;

});

this.centerDialogVisible = true;

}

}

};

效果

$refs定位不到的主要原因是因为v-if、v-for、v-show这些语句如果依赖父组件传来的参数的话，该该参数是在mounted()阶段子还没获取得到~~~~！！！！

如果想要真正地在DOM加载完成后拿到数据，就需要调用VUE的全局api ：this.$nextTick(() => {})