mint-ui框架swipe轮播图的使用

安装mint-ui

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i mint-ui -S

引入mint-ui

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
     
  el: '#app',
  components: {
      App }
})

以上代码便完成了 Mint UI 的引入。需要注意的是，样式文件需要单独引入。

按需引入（推荐）

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将.babelrc（在babel.config.js中添加） 修改为：

{
     
  "plugins": ["other-plugin", ["component", [
    {
      "libraryName": "mint-ui", "style": true }
  ]]]
}

Swipe - 轮播图

使用按需引入在mian.js文件下引入并注册组件swipe和swipeItem：

import {
      Swipe, SwipeItem } from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

注意需要引入css文件。

使用轮播图组件：

注意需要给mint-swipe设置高度，否则无法看到图片。

API

参数	说明	类型	可选值	默认值
speed	动画持时（毫秒）	Number		300
auto	自动播放的时间间隔（毫秒）	Number		3000
defaultIndex	初始显示的轮播图的索引	Number		0
continuous	是否可以循环播放	Boolean		true
showIndicators	是否显示indicators	Boolean		true
prevent	是否在 touchstart事件触发时阻止事件的默认行为。设为true 可提高运行在低版本安卓浏览器时的性能	Boolean		false
stopPropagation	是否在 touchstart事件触发时阻止冒泡。	Boolean		false

Slot

mt-swipe

name	描述
-	一个或多个 mt-swipe-item 组件

mt-swipe-item

name	描述
-	单个轮播图的内容