Dom replication problem after loop is enabled

1. Adding an event to a label cannot be triggered

  • This is due to dom replication problems after loop is enabled. Only the DOM structure is copied but the added events are not copied

The solution

  • Use the custom attribute data-index in H5 to add the current index value, and give a unique identifier to the tag to be clicked. In this case, I added a unique identifier to class
<swiper ref="mySwiper"
      :options="swiperOptions" v-if="dataList" :key="key">
      <template v-for="(item, index) in dataList">
        <swiper-slide
          :key="index"
          :style="swiperStyle">
          <div class="left-img"> 
            <div :style="leftImgStyle(item.imgUrl)"></div>
          </div>
          <div class="right-text">
            <table>
              <tr>
                <td>
                  <label class="key">Name:</label>
                </td>
                <td class="name" :data-index="index">. {{item name | | 'temporarily no data'}}</td>
              </tr>

            </table>
          </div>
        </swiper-slide>
      </template>
      </swiper>

Copy the code
  • In computed, add a click event to ON in swiper, and fire different event functions based on the unique identifier added in the HTML above. This in the ⚠️ on object is an instance of swiper. So you need to mount an instance of the current component to the variable.
swiperOptions () {
      let vm = this
      const { data, config: { swiper: { atuoplay, delay, slidesPerView, spaceBetween } }  } = this
      return {
        pagination: {
          el: '.swiper-pagination'
        },
        // init:false,
        loop : data.length <= slidesPerView ? false : true.direction: 'vertical',
        slidesPerView,
        autoplay: atuoplay ? {
          delay,
          disableOnInteraction: false
        } : undefined.observer: true.observeParents: true.observeSlideChildren: true.spaceBetween: slidesPerView > 1 ? spaceBetween : 0.debugger: true.on: {
          click (e) {
            // const realIndex = this.realIndex;
            if (e.target.className == "idCard") {
              vm.idCardClick(e.target.dataset.index);
            } else if (e.target.className == "warning") {
              vm.warningClick(e.target.dataset.index)
            }
            // console.log(vm);
            // vm.handleClickSlide(realIndex)}}}},Copy the code

2. Modify the Options configuration in real time

  • Vue-awes-swiper does not listen for options configuration items, so sometimes changing options values to change styles fails

The solution

  1. Listen for data changes and options changes to reassign keys (I used uUID to do this) so that the Vue view can be forced to refresh (not recommended)
<swiper ref="mySwiper"
      :options="swiperOptions" v-if="dataList" :key="key">
</swiper>
Copy the code

Problems arising

Swiper is rerendered every time options are changed or data is changed, and swiper instances are destroyed:true. So when I wanted to call swiper’s built-in methods in this case, I couldn’t

A scenario

When loop=true is enabled, it is expected that the mouse hover will pause after entering and continue to hover after leaving

// Add mouse entry and mouse exit events to the outer box
<div @mouseenter="stopSwiper" @mouseleave="runSwiper"></div>
//
stopSwiper () {
  // this.$refs.mySwiper? . $swiper. The autoplay. Stop ();
  this.$refs.mySwiper.swiperInstance.autoplay.stop()
},
runSwiper () {
   // this.$refs.mySwiper? . $swiper. The autoplay. Start ();
  this.$refs.mySwiper.swiperInstance.autoplay.start()
},
Copy the code

At first, I wanted to use the Swiper instance call method to control the start and stop of the rotation, but after using this method, Swiper was destroyed, but Swiper will instantiate a swiperInstance instead of being destroyed, and the method inside it can also be called. That solves the Swiper destruction problem

  1. Direct assignment via parmas (personally not very useful, but it is good to change some simple configuration)
/ / computed
  swiper() {
      return this.$refs.mySwiper? .$swiper },// The function that needs to be changed
  this.swiper.params.autoplay=200;
 
Copy the code

3. Enable loop copy problem when the number of slidesPerView is greater than the number of display data

  • If the number of SliDesperViews is greater than the number of display data, the loop will duplicate the DOM, resulting in two identical DOM

The solution

Since my options are written in CompuTD and DOM rendering is refreshed after each change, I only need to compare the number of slidesPerView and data to control the switch of loop

   // computd
  swiperOptions () {
      const { data, config: { swiper: { atuoplay, delay, slidesPerView, spaceBetween } }  } = this
      return {
        loop : data.length <= slidesPerView ? false : true,
        slidesPerView,
    },
Copy the code

Vue-awesome-swiper has a lot of holes in its usage, so I hope it helps someone who needs it