vue 使用swiper的一些问题（页面渲染问题）

Posted 2021-02-03 lizhao123

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