首先初始化加载要获取vue 当前对象this，而不是swiper 的对象this。
<script scoped>
import axios from "axios";
import { Toast, Popup } from "mint-ui";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { rootPath } from "../config/hostapi";
export default {
components: {
swiper,
swiperSlide
},
data() {
name: "cinemadetail";
return {
popupVisible: false,
merchant: null,
swiperOptionTop: {
notNextTick: true,
spaceBetween: 10,
},
swiperOptionThumbs: {
initialSlide :0,
spaceBetween: 10,
centeredSlides: true,
slidesPerView: "auto",
touchRatio: 0.2,
preventLinksPropagation : true,
slideToClickedSlide: true,
notNextTick: true,
on:{
slideChangeTransitionEnd: ()=>{
this.setOptions()
}
}
}
};
},
computed: {
swiperTop() {
return this.$refs.swiperTop.swiper;
},
swiperThumbs() {
return this.$refs.swiperThumbs.swiper;
}
},
created: function() {
const that = this;
var params = new URLSearchParams();
params.append("merchant_id", this.$route.params.cid);
params.append("merchant_type", this.$route.params.ctype);
params.append("longitude", 0);
params.append("latitude", 0);
axios
.get(rootPath + "/app/session_merchant_detail.do", { params: params })
.then(function(response) {
let data = response.data;
if (data.errcode == 0) {
that.$nextTick(function() {
that.merchant = data.data;
// console.log(that.merchant);
});
} else {
Toast(data.errmsg);
}
})
.catch(function(error) {
console.log(error);
//Toast(error);
});
},
mounted: function() {
},
methods: {
openPopup: function() {
this.popupVisible = true;
},
closePopup: function() {
this.popupVisible = false;
},
setOptions: function() {
let index =this.swiperThumbs.activeIndex;
this.swiperTop.slideTo(index, 1000, false);
let item=this.merchant.merchant_product_list[index];
console.log(item)
}
}
};
</script>
<style scoped>
.swiper-slide {
background-position: center;
}
.gallery-thumbs .swiper-slide {
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
</style>
跟后台加载数据swiper新版本看文档 添加使用了 on:{
slideChangeTransitionEnd: ()=>{
this.setOptions()
}
}
否则拿不到当前vue实例对象 this 可能是swiper对象
滑动执行打印一次setOptions()
点击选择大印3次，执行了3遍setOptions()，
臣妾做不到了
