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'

在组件中使用

效果

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。