DWQA QuestionsCategory: ProgramVue uses swiper's circular mode to bind event @ Click to each slider, and the replicated swiper-slide click event is invalid
Wu Xiaowei asked 1 week ago

After Vue introduces swiper, use loop loop, and then bind event @click=’fn()’to each swiper-slide slider. Because of the loop mode, swiper will copy two swiper-slide sliders to do the loop effect, but the click effect of the two replicas is invalid, and the other is normal.
Accept data at create, and then $nextTick (function () {do swiper initialization})
Vue uses swiper's circular mode to bind event @ Click to each slider, and the replicated swiper-slide click event is invalid
Vue uses swiper's circular mode to bind event @ Click to each slider, and the replicated swiper-slide click event is invalid

8 Answers
seven777777 answered 1 week ago

You can use swiper’s onclick callback function to trigger click events instead of binding them to the DOM

be irrelevant to the subject answered 1 week ago

I don’t know if the landlord has solved it or not. Here I share my solution (which has been solved). Usedvue-awesome-swiper(The built-in version of swiper is 4.x).
Dom binding events are problematic when loops are turned on.Because slides in loop mode duplicate several slides around to form a loop, but do not duplicate click events bound to the dom.
Therefore, only the API method provided by swiper can be used to solve the problem.
In swiperOption, a click event is defined with the following code:
HTML code snippet

<swiper :options="swiperOption" ref="mySwiper">
  <swiper-slide
    v-for="(banner, index) in bannerList"
    :key="banner.id">
    <div class="banner-item">
      <img :src="banner.imgUrl" alt="news">
      <p>{{banner.title}}</p>
    </div>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

JS code snippet

let vm = null;
new Vue({
    data: function() {
     return {
         SwiperOption: {// Rotary Configuration
              Loop: true, // circular scrolling
              on: {
                click: function () {
                  // Here's the pit. It's important to note that this points to swpier instances, not the current vue, so with the help of vm, we call methods in methods. 
                  // console.log(this); // -> Swiper
                  // Current active block index, unlike active index, does not count the number of replicated blocks in loop mode.
                  const realIndex = this.realIndex;
                  vm.handleClickSlide(realIndex);
                }
              }
            }
         },
         bannerList: [
          {
           id: '1',
           Title:'World Cup Opener - Supernova 1 goal 2 assists Russia 5-0 Saudi Gritzman announces staying at Atletico',
           imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/AYes-hcyszrz3457297.jpg'
          },
          {
            id: '2',
            Title:'Full face value! On the first day of the World Cup, beautiful fans take stock.
            imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/H3Wz-hcyszrz4804003.jpg'
          },
          {
            id: '3',
            Title:'Inventory of all previous World Cup big scores `massacre',
            imgUrl: 'http://n.sinaimg.cn/sports/180/w640h340/20180615/FNuk-hcyszrz4805039.jpg'
          }
        ]  
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    created() {
        vm = this;
    },
    methods: {
       handleClickSlide(index) {
           Console. log ('current click index:', index);
       } 
    }
})

I hope I can help you and more people.

Sprite is good for stomach answered 1 week ago

No observer: true

undefined answered 1 week ago

I also encountered this problem. The landlord solved it. Share the reasons for solving it.

quentin answered 1 week ago

This is clickable, but how do you transfer the parameters in the DOM?