本篇文章小编给大家分享一下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(() => {})