mint-swipe组件，两张图片并排出现，而没有滚动出现。

Question

在项目中要做一个Banner，要求图片滚动出现，因此引入了mint-ui的swipe组件，按照官方提供的demo：

<template>
  <div class="page-swipe">
    <h1 class="page-title">Swipe</h1>
    <p class="page-swipe-desc">基础用法</p>
    <mt-swipe :auto="4000">
      <mt-swipe-item class="slide1">1</mt-swipe-item>
      <mt-swipe-item class="slide2">2</mt-swipe-item>
      <mt-swipe-item class="slide3">3</mt-swipe-item>
    </mt-swipe>

    <p class="page-swipe-desc">隐藏 indicators</p>
    <mt-swipe :show-indicators="false">
      <mt-swipe-item class="slide1">1</mt-swipe-item>
      <mt-swipe-item class="slide2">2</mt-swipe-item>
      <mt-swipe-item class="slide3">3</mt-swipe-item>
    </mt-swipe>

    <p class="page-swipe-desc">取消自动播放</p>
    <mt-swipe :auto="0">
      <mt-swipe-item class="slide1">1</mt-swipe-item>
      <mt-swipe-item class="slide2">2</mt-swipe-item>
      <mt-swipe-item class="slide3">3</mt-swipe-item>
    </mt-swipe>

    <p class="page-swipe-desc">设置默认显示页</p>
    <mt-swipe :auto="0" :defaultIndex="1">
      <mt-swipe-item class="slide1">1</mt-swipe-item>
      <mt-swipe-item class="slide2">2</mt-swipe-item>
      <mt-swipe-item class="slide3">3</mt-swipe-item>
    </mt-swipe>

    <p class="page-swipe-desc">单个幻灯片</p>
    <mt-swipe :show-indicators="false">
      <mt-swipe-item class="slide1">SINGLE SLIDE</mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<style>
  @component-namespace page {
    @component swipe {
      @descendent desc {
        text-align: center;
        color: #666;
        margin-bottom: 5px;
      }
      .mint-swipe {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
      }

      .mint-swipe-item {
        line-height: 200px;
      }

      .slide1 {
        background-color: #0089dc;
        color: #fff;
      }

      .slide2 {
        background-color: #ffd705;
        color: #000;
      }

      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
    }
  }
</style>

（地址：https://github.com/ElemeFE/mi...），添加了img标签

<template>
  <div >
    <mt-swipe :auto="1000">
      <mt-swipe-item >
        <img src="https://sfault-activity.b0.upaiyun.com/299/510/2995106733-59f96d9265f28_medium" alt="">
        </mt-swipe-item>
      <mt-swipe-item >
        <img src="https://sfault-activity.b0.upaiyun.com/841/059/84105916-59c486322df6e_medium" alt="">
        </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
export default {
}
</script>
<style>
  
</style>

但是，出来的效果，滚动的效果是有的，但是却是两张图片并排显示，找了好久没解决，是我哪里写错了吗？

Answer 1

你这都没有使用组件,你要在 export default 中使用组件;
而不是 Vue.component(Swipe.name, Swipe)

   Vue.component(SwipeItem.name, SwipeItem)    这样使用!

    export default {
        components:{
              'mt-swipe':Swipe,
            'mt-swipe-item':SwipeItem
        }
}