vueJS如何实现图片横向滑动

本篇内容主要讲解"vueJS如何实现图片横向滑动"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vueJS如何实现图片横向滑动"吧!

vueJS实现图片横向滑动的方法：1、使用npm安装vue-awesome-swiper；2、在main.js中引用vue-awesome-swiper；3、使用swiper实现左右滑动切换图片即可。

本文操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

vueJS怎么实现图片横向滑动？

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(() => {})

到此，相信大家对"vueJS如何实现图片横向滑动"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！