177 lines
5.0 KiB
JavaScript
177 lines
5.0 KiB
JavaScript
var vm = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
tel: '',
|
||
i: 2,
|
||
activeIndex: 2,
|
||
solveSwiper: "",
|
||
teleManaI: 1,
|
||
useNum: {
|
||
num1: 0,
|
||
num2: 0,
|
||
num3: 0,
|
||
num4: 0
|
||
}
|
||
},
|
||
mounted() {
|
||
this.allSwiper();
|
||
this.useNumAdd()
|
||
},
|
||
mixins: [mixins],
|
||
methods: {
|
||
solveTab(i) {
|
||
this.i = i;
|
||
var j = i - 1;
|
||
this.solveSwiper.slideTo(j, 1000, false);
|
||
},
|
||
teleMana(i) {
|
||
this.teleManaI = i;
|
||
},
|
||
allSwiper() {
|
||
var customSwiper = new Swiper('.solu-swiper-container', {
|
||
// loop: true, // 循环模式选项
|
||
initialSlide: 1,
|
||
centeredSlides: true,
|
||
slidesPerView: "auto",
|
||
slideBetween: 60,
|
||
observer: true,
|
||
observeParents: true,
|
||
autoplay: {
|
||
delay: 5000
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
}
|
||
});
|
||
new Swiper('.res-use-wrap .swiper', {
|
||
centeredSlides: true,
|
||
autoplay: true,
|
||
autoplay: {
|
||
delay: 5000,
|
||
disableOnInteraction: false,
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
}
|
||
|
||
})
|
||
var _this = this;
|
||
var solveSwiper = new Swiper('.tele-swiper-container', {
|
||
// loop: true, // 循环模式选项
|
||
initialSlide: 1,
|
||
slidesPerView: 'auto',
|
||
centeredSlides: true,
|
||
observer: true,
|
||
// spaceBetween: -50,
|
||
// slidesOffsetBefore: -50,
|
||
observeParents: true,
|
||
slideToClickedSlide: true,
|
||
autoplay: {
|
||
delay: 5000
|
||
},
|
||
// pagination: {
|
||
// el: '.swiper-pagination',
|
||
// clickable: true,
|
||
// },
|
||
on: {
|
||
slideChangeTransitionStart() {
|
||
_this.i = this.activeIndex + 1;
|
||
},
|
||
},
|
||
});
|
||
this.solveSwiper = solveSwiper;
|
||
var customSwiper = new Swiper('.tele-custom-swiper-wrap', {
|
||
// loop: true, // 循环模式选项
|
||
initialSlide: 0,
|
||
slidesPerView: 3,
|
||
centeredSlides: true,
|
||
slidesPerView: 'auto',
|
||
observer: true,
|
||
observeParents: true,
|
||
autoplay: {
|
||
delay: 5000
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
}
|
||
});
|
||
},
|
||
useNumAdd() {
|
||
const self = this
|
||
useNumAddfuction = () => {
|
||
let num1 = 0
|
||
var t1 = setInterval(() => {
|
||
num1++
|
||
self.useNum.num1 = num1
|
||
if (num1 == 43) clearInterval(t1)
|
||
}, 30)
|
||
let num2 = 0
|
||
var t2 = setInterval(() => {
|
||
num2++
|
||
self.useNum.num2 = num2
|
||
if (num2 == 36) clearInterval(t2)
|
||
}, 40)
|
||
let num3 = 0
|
||
var t3 = setInterval(() => {
|
||
num3++
|
||
self.useNum.num3 = num3
|
||
if (num3 == 18) clearInterval(t3)
|
||
}, 70)
|
||
let num4 = 0
|
||
var t4 = setInterval(() => {
|
||
num4++
|
||
self.useNum.num4 = num4
|
||
if (num4 == 28) clearInterval(t4)
|
||
}, 50)
|
||
}
|
||
//observer配置项
|
||
var observerOptions = {
|
||
threshold: .5, //目标元素与视窗重叠的阈值（0~1）
|
||
root: null // 目标视窗即目标元素的父元素，如果没有提供，则默认body元素
|
||
}
|
||
//observer 回调函数
|
||
const observerCallback = (entries) => {
|
||
entries.forEach(item => {
|
||
/*
|
||
* item.time发生相交到相应的时间，毫秒
|
||
* item.rootBounds：根元素矩形区域的信息，如果没有设置根元素则返回 null，图中蓝色部分区域。
|
||
* item.boundingClientRect：目标元素的矩形区域的信息，图中黑色边框的区域。
|
||
* item.intersectionRect：目标元素与视口（或根元素）的交叉区域的信息，图中蓝色方块和粉红色方块相交的区域。
|
||
* item.isIntersecting：目标元素与根元素是否相交
|
||
* item.intersectionRatio：目标元素与视口（或根元素）的相交比例。
|
||
* item.target：目标元素，图中黑色边框的部分。
|
||
*/
|
||
|
||
// 当前元素可见
|
||
// console.log("🚀 observerCallback item.intersectionRatio", item.intersectionRatio)
|
||
if (item.isIntersecting) {//当前元素可见
|
||
{
|
||
useNumAddfuction()
|
||
}
|
||
// 解除观察当前元素 避免不可见时候再次调用callback函数
|
||
// observer.unobserve(item.target)
|
||
}
|
||
else {
|
||
// 当前元素不可见
|
||
|
||
}
|
||
})
|
||
}
|
||
//实例化观察者对象
|
||
var observer = new IntersectionObserver(observerCallback, observerOptions);
|
||
//将目标元素传入观察对象
|
||
observer.observe(document.querySelector(".market-use-wrap"));
|
||
}
|
||
}
|
||
});
|
||
if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
|
||
new WOW().init();
|
||
};
|