Swiper is now mature and stable in all aspects.

Swiper is not limited to a rotation map. It is very strong.

The company’s projects are tied to Element, as is Swiper

Use Swiper to cancel automatic rotation and swipe manually instead, using forms instead of images, so that a single screen of form

Sliding to the next screen triggers form validation in Element, and an unfilled form prevents the user from sliding to the next page.

SwiperOption: {pagination: {el:'.swiper-pagination'}, paginationClickable:true, 
        autoplay: 1500, 
        cancelable: false,
        autoplayDisableOnInteraction: false,
        loop: false,
        autoHeight: true,
        touchMoveStopPropagation: true// Stop touchMove bubbling allowSlideNext:falseRotate: 30, stretch: 10, depth: 60, modifier: 2, slideShadows:true}, on: {// Swiper built-in method, when each page is moved to trigger validation method sliderMove: () => {// arrow function to get an instance of swiper, this-> swiperlet swiper = this.$refs.mySwiper.swiper
            letI = swiper.activeIndex // Variable name I Accesses each page index of swiperif(I === 0) {// Here is the form element provides to validate this.$refs['form'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('Incomplete form')}}}else if (i === 1) {
              this.$refs['formList'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('Unfinished form')}}}else if (i === 2) {
              this.$refs['formScend'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('Unfinished form')}}}else if (i === 3) {
              this.$refs['formTrist'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('Unfinished form')}}}else if (i === 4) {
              this.$refs['formFive'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('Unfinished form')}}}else if (i === 5) {
              this.$refs['formSix'].validate((valid) => {
                if (valid) {
                  swiper.allowSlideNext = true
                } else {
                  swiper.allowSlideNext = false
                  console.log('Unfinished form')}})}}}},Copy the code

Of course, there were also problems at that time. The following is a summary:

  1. In vue Data, to use the built-in swiper method, you must first change the “this” pointer to point to the swiper instance, “this– swiper”

  2. $refs.myswiper = this.$refs.myswiper.$refs.myswiper = this

<swiper :options="swiperOption" ref="mySwiper">... // </swiper>Copy the code
  1. When the form is filled out and you swipe to the next page, validation is triggered immediately, not when you swipe again. Method to determine if the current page index is several, and then trigger the square method

The functionality is simple, not difficult, and not very logical. It’s all about the details

If you feel helpful to you, please click a like bai 👍