jquery积累

1 jquery 与 vuejs

　　1.1 jquery 与 vuejs mint-ui swiper搭配

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

　　

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