vue 使用swiper的一些問題(頁面渲染問題)
阿新 • • 發佈:2019-01-14
//Swiper上下滾動初始化 swiper_init(){ this.$nextTick(function(){ var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切換選項 autoplay: {//自動播放 delay: 4000, disableOnInteraction: false,//使用者操作swiper之後,是否禁止autoplay。預設為true:停止。 }, //當你點選tab切換時swiper滑動失效 observer:true,observeParents:true,//這個是啟動動態檢查器(OB/觀眾/觀看者),當改變swiper的樣式(例如隱藏/顯示)或者修改swiper的子元素時,自動初始化swiper。 loop: true, // 迴圈模式選項 slidesPerView: 1,//設定slider容器能夠同時顯示的slides數量 spaceBetween: 20,//在slide之間設定距離(單位px)。 mousewheel: true, pagination: {//分頁器 el: '.swiper-pagination', clickable: true, }, on: { // 那些年,那些坑--swiper loop:true引發繫結dom的click事件無效及解決方案 click: function (res) { // 這裡有坑 // 需要注意的是:this 指向的是 swpier 例項,而不是當前的 vue, 因此藉助 vm,來呼叫 methods 裡的方法 // console.log(this); // -> Swiper // 當前活動塊的索引,與activeIndex不同的是,在loop模式下不會將 複製的塊 的數量計算在內。 const realIndex = this.realIndex; //點選待審批、待授權、待審計檢視詳情 console.log(realIndex) let item='',type='' if(vm.activeName=='待審批'){ item=vm.agencyCenterData.manager.list[realIndex] type='審批處理' }else if(vm.activeName=='待授權'){ item=vm.agencyCenterData.keeper.list[realIndex] type='授權管理' }else if(vm.activeName=='待審計'){ item=vm.agencyCenterData.auditor.list[realIndex] type='審計處理' } vm.waitingCenter(item,type); } }, }) }) },