This is my first article on getting started.
I am a front end side dish chicken, this is the problem I encountered in the project, we made a PC side commodity sliding effect, when using the loop loop, the copied goods can not trigger the click event. Finally, I found the DOM node in swiper instance where I clicked the item. Swiper loop has a data-index attribute, and I found it and got its value, so I knew the index value of the item, and triggered the click event. No more words on the code!!!!
/ / swiper configuration
initSwiper () {
const that = this
const width = document.body.clientWidth
const list = document.querySelectorAll('.swiper-slide')
const numberA = list[0].clientWidth / 4
const numberB = list[0].clientWidth / 8
// eslint-disable-next-line no-unused-vars
const mySwiper = new Swiper('.swiper-container', {
loop: true./ / the offset
slidesOffsetBefore: width <= 720 ? -numberA : (width > 720 && width <= 968)?0 : -numberB * 3.slidesPerView: width <= 720 ? 2 : (width > 720 && width <= 968)?3 : 4.centeredSlides: true.centeredSlidesBounds: true.navigation: {
nextEl: '.swiper-button-next'.prevEl: '.swiper-button-prev'
},
on: {
click: function (swiper, event) {
// Determine whether to click the forward and back buttons
if(! swiper.clickedSlide) {if (event.srcElement.classList[2= = ='van-icon-arrow') {
this.slideNext()
return false
} else {
this.slidePrev()
return false}}// Determine which array is clicked and which item is under the array
if (swiper.el.attributes[1].nodeValue - 0= = =0) {
//Swiper.clickedSlide is the DOM node of the clicked item in Swiper instance
that.detail(0, swiper.clickedSlide.attributes[2].nodeValue - 0)}else if (swiper.el.attributes[1].nodeValue - 0= = =1) {
that.detail(1, swiper.clickedSlide.attributes[2].nodeValue - 0)}else {
that.detail(2, swiper.clickedSlide.attributes[2].nodeValue - 0)}}}})},Copy the code
I do have a little trouble with this method, welcome to leave a message to correct