vue --轮播图

轮播图，可使用mint-ui中的swipe

 

HTML:

<Swipe :auto="4000">

　　<SwipeItem v-for="item in slideitem">

　　　　<img :src="item.img" alt="" @click="toUrl(item.link)">

　　</SwipeItem>

</Swipe>

 

js:

import Swipe from " mint-ui/lib/swipe";

import SwipeItem from " mint-ui/lib/swipe-item";

export default {

　　data(){

　　　　return {

　　　　　　slideitem:[]

　　　　}

　　},

　　components: {

　　　　Swipe,SwipeItem

　　},

}

 

 

 css :

 

.mint-swipe {

overflow: hidden;

position: relative;

height: 2.8rem;

.mint-swipe-items-wrap {

position: relative;

overflow: hidden;

height: 100%;

}

.mint-swipe-items-wrap > div {

position: absolute;

-webkit-transform: translateX(-100%);

transform: translateX(-100%);

width: 100%;

height: 100%;

display: none

}

.mint-swipe-items-wrap > div.is-active {

display: block;

-webkit-transform: none;

transform: none;

}

.mint-swipe-indicators {

position: absolute;

bottom: .1rem;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.mint-swipe-indicator {

width: .4rem;

height: 6px;

display: inline-block;

border-radius: 3px;

background: #000;

opacity: 0.6;

margin: 0 3px;

}

.mint-swipe-indicator.is-active {

background: #fff;

}

}