引入

// main.js // 導入包 import { Swipe, SwipeItem } from 'mint-ui'// 注冊 Vue.component(Swipe.name, Swipe); Vue.component(SwipeItem.name, SwipeItem);

放在需要顯示的位置

// HomeContainer.vue(首頁 -> 組件) <template><div><!-- 輪播圖區域 --><mt-swipe :auto="4000"><mt-swipe-item>1</mt-swipe-item><mt-swipe-item>2</mt-swipe-item><mt-swipe-item>3</mt-swipe-item></mt-swipe></div> </template>

輪播圖需要高度

// HomeContainer.vue <template> ... </template><style lang="scss" scoped>.mint-swipe {height: 200px;} </style>

設置輪播圖每一張圖片的顏色

// css寫法 <style lang='scss' scoped>.mt-swipe-item:nth-child(1){background-color:red;}.mt-swipe-item:nth-child(2){background-color:blue;}.mt-swipe-item:nth-child(3){background-color:lightblue;} </style>// 使用less寫法 <style lang="scss" scoped>.mt-swipe-item {&:nth-child(1){background-color:red;}&:nth-child(2){background-color:blue;}&:nth-child(3){background-color:lightblue;}} </style>

總結

以上是生活随笔為你收集整理的vue --- mintUI中Swipe(轮播图)的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。