vueシームレスなスクロール広告プラグインの使用

1058 ワード

//  
npm install vue-seamless-scroll --save

//   main.js        :
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
ページで参照アドレスを使う:https://chenxuan1993.gitee.io/component-document/index_prod葃/component/seamless-default
このプラグインを使って、モニターボタンを押すと、内容は兄弟要素のスクロール距離だけで、下記のような書き方をモニターできます.
var a = document.getElementsByClassName('seamless-warp')[0].firstElementChild;
				var str = window.getComputedStyle(a).transform;
				var index = str.lastIndexOf("\-");
				var index2 = str.lastIndexOf("\)");
				str=str.substring(index+1,index2);
				str = Number(str);
				console.log(str)
				if(str==0||str==60||str==120){
					this.$router.push({
						path: 'annunciate',
						query: {
							id: 2
						}
					})
				}else if(str==20||str==80){
					this.$router.push({
						path: 'annunciate',
						query: {
							id: 1
						}
					})
				}else{
					this.$router.push({
						path: 'annunciate',
						query: {
							id: 0
						}
					})
				}