轮播图，可以使用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;
}
}