MintUI实现手机端首页中间轮播图

---

前言

MintUI实现手机端首页底部

---

一、效果图

二、代码

1.vue

代码如下（示例）：

//与头部隔开一点距离10px
<mt-tab-container v-model="navactive" style="margin-top:10px;">
  //按照头部ui部分做的轮播图
  <mt-tab-container-item id="1">
    //滑动间隔为4秒
    <mt-swipe :auto="4000" class="gao" >
      <mt-swipe-item>
        <img src="../assets/swipe/1.jpg" alt>
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/swipe/2.jpg" alt>
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/swipe/3.jpg" alt>
      </mt-swipe-item>
    </mt-swipe>
  </mt-tab-container-item>
  <mt-tab-container-item id="2">交互内容</mt-tab-container-item>
  <mt-tab-container-item id="3">电商内容</mt-tab-container-item>
  <mt-tab-container-item id="4">网页内容</mt-tab-container-item>
</mt-tab-container>

2.style

代码如下：

<style scoped>

.gao{
    height: 200px;
    
}
.gao img{
    width:100%;
}
</style>

---

总结

大结局在后面