vue-awesome-swiper轮播+滑动+点击+异步套数据

原创
2018/03/23 18:46
阅读数 1.9K

首先初始化加载要获取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(),

臣妾做不到了

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部