jquery积累

时间 2019-11-17

标签 jquery 积累栏目 JQuery 繁體版

原文原文链接

1 jquery 与 vuejscss

　　1.1 jquery 与 vuejs mint-ui swiper搭配vue

　　　　问题： vuejs mounted钩子里 axios给vue data里面的对象赋值后，在axios里面执行this.$nextTick(fn) fn里面执行jquery的操做，例如 jquery获取轮播可见的图片的高度（该轮播组件来自mint-ui swiper）此时这个图片可能会是undefined，致使这个对象的.height()也为undefined ，而我又须要滚动高度超过图片高度后作些操做jquery

mounted: 

// 获取数据并给vue data里面的对象赋值
axios.get('/api/banner/1').then((res) => {
        if (res.status === 200) {
          this.dataSwiper = res.data.result;
          this.$nextTick(() => {
            this._calculateSwiperHei();
          })
        }
      }).catch((err) => {
        console.log(err);
      });

methods: 
/* 轮播高度计算 */
      _calculateSwiperHei() {
        let $swiperWrap = $('.swiper-wrap');
        let $floorBannerImgHei = $('.floor-banner-img').height() > 0 ? $('.floor-banner-img').height() : '77px';
        let $swiperFloorBannerWrap = $('.floor-banner-list');
        let $imgHei = $('.is-active .swiper-img').height() || 137; // *** 注意 

        // 轮播高度banner设置
        // console.log($swiperWrap[0]);

        this.topSwiperImgHei = $imgHei;
        $swiperWrap.css('height',$imgHei); // wiperImgHei = $imgHei;
        // 10大金刚高度设置
        $swiperFloorBannerWrap.css('height',$floorBannerImgHei);
      },

View Code