给首页分类切换添加loadingUI

解决了跨域问题，我们的数据回来了

当我们直接切换数据的时候，显得有点突兀。

在移动端，当我们去加载的时候，UI上会显示Loading的状态

使用elementUI实现

elementui官网

怎么使用呢？

只要在对应的标签上添加：

  v-loading="loading"

即可

所以，我们在我们的代码里找到对应的位置添加上即可

整合到代码里

<div id="recommend-content-list-box"
           v-loading="loading">
        <div class="recommend-content-title">
          <span v-html="currentCategory"></span>
        </div>
        <div class="recommend-content-list clear-fix">
          <div class="recommend-content-item float-left"
               v-for="(item,index) in content.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item" :key="index">
            <div class="recommend-item-cover">
              <img :src="item.pict_url+'_240x240xzq90.jpg_.webp'">
            </div>
            <div class="recommend-item-title">
              <a v-text="item.title" :href="item.coupon_click_url!==null?item.coupon_click_url:item.click_url"
                 target="_blank"></a>
            </div>
            <div class="recommend-item-info">
              <a v-if="item.coupon_click_url!==null" class="buy-btn" :href="item.coupon_click_url"
                 target="_blank">领券购买</a>
              <span class="recommend-prise" v-text="item.coupon_click_url===null?'晚了，无优惠券':'原价：'+item.zk_final_price">原价：34.00</span>
            </div>
            <span class="recommend-coupon-info" v-if="item.coupon_info!==null" v-text="item.coupon_info">

            </span>
          </div>
        </div>

我们这部分内容是渲染商品内容的，当我们去切换分类的时候。

显示为Loading状态

所以添加上

 v-loading="loading"

即可，如上代码

而Loading的状态根据我们触发加载数据和结果回来以后改变就okay啦

切换效果

okay，到这里我们就把loading搞定了

详情请看视频视频教程吧。