1. 程式人生 > >vue 使用swiper的一些問題(頁面渲染問題)

vue 使用swiper的一些問題(頁面渲染問題)

//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); 
							}
						},
					})
				})
				
			},