gswz/SFHY/static/js/solu_market.js

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();
};