How to realize horizontal sliding of Picture by vueJS

The main content of this article is to explain "how to slide the picture horizontally in vueJS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vueJS how to achieve picture horizontal sliding" bar!

VueJS to achieve picture horizontal sliding method: 1, use npm to install vue-awesome-swiper;2, reference vue-awesome-swiper;3 in main.js, use swiper to achieve left and right slide to switch pictures.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

How does vueJS make the picture slide horizontally?

Vue uses swiper to swipe left and right to switch images:

Install vue-awesome-swiper using npm

Npm install vue-awesome-swiper-save

Referencing in main.js

Import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.user (VueAwesomeSwiper) import' swiper/dist/css/swiper.css'

Use in components

{{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: {/ / enlarge the picture enlargePic (I) {this.activeIndex = I; this.isDialogShow = true / / use $refs. If ref is located in a DOM node with v-if, v-for or v-show, / / only undefined can be returned, because there is no this.$nextTick (() = > {var swiper = this.$refs.mySwiper.swiper; swiper.activeIndex = I;}); this.centerDialogVisible = true;}}; .timeline {display: block; margin: 10px 20px 5px } # star-pic-vue. El-dialog__wrapper {position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; margin: 0; background: # 171717;} # star-pic-vue {width: 100%; height: auto; display: flex; flex-wrap: wrap; justify-content: stretch; padding: 3px 13px; img {width: 82px; height: 80px; margin: 4px 0px 0px; padding-right: 2px;}. Height: 100%; margin: 0;}}. El-carousel__item h4 {color: # 475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; height: 100%; width: 100%;}. El-dialog__header {display: none;}. El-dialog__body {padding: 0! important; margin: 0! important; height: 460px; background: # 171717 } .el-carousel {height: 100%;} .el-carousel__container {height: 410px;} .el-carousel__indicators--outside {margin-top: 20px;}}

Effect.

The main reason why $refs cannot be located is that if the statements such as v-if, v-for, and v-show depend on the parameter passed by the parent component, the parameter has not been obtained by the child in the mounted () phase.

If you want to actually get the data after the DOM is loaded, you need to call VUE's global api: this.$nextTick (() = > {})

At this point, I believe that everyone on the "vueJS how to achieve picture horizontal sliding" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!