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

View Code