[JavaScript知识库]mint-ui实现轮播图

mint-ui实现轮播图

使用mint-ui

1. npm安装mint-ui

   npm install mint-ui -S

   一定要安装2版本以上的，1版本的会报错

2. 在main.js中引入

   import MintUI from ‘mint-ui’

   import ‘mint-ui/lib/style.css’

   Vue.use(MintUI)

3. 在需要的地方引入swipe组件

   import {Swipe, SwipeItem} from ‘mint-ui’

   import ‘mint-ui/lib/style.css’

   export default {

   components: {

   ‘mt-swipe’: Swipe,

   ‘mt-swipe-item’: SwipeItem

   }

   }

4. 完整的代码

   注意： 1.不要修改mt-swipe中的样式，可以对应修改包裹在外的组件宽高，若修改其中组件的宽高会导致轮播出现问题

   2.修改的颜色使用/deep/或>>>来穿透，自定义的父组件>>> mintui的组件类名

   例如：.miyt /deep/ .mint-swipe-indicator.is-active{

   background-color: #01CDA7;
   }

   .miyt >>> .mint-swipe-indicator.is-active{

   background-color: #01CDA7;
   }

   <template>
     <div class="miyt">
       <mt-swipe :auto="3000">
     <mt-swipe-item v-for="(item, index) in imglist1" :key="index">
       <img :src="require(`@/assets/${item.img}`)" alt="">
     </mt-swipe-item>
     <!-- <mt-swipe-item>2</mt-swipe-item>
     <mt-swipe-item>3</mt-swipe-item> -->
   </mt-swipe>
     </div>
   </template>
   
   <script>
   import {Swipe, SwipeItem} from 'mint-ui'
   import 'mint-ui/lib/style.css'
   export default {
     components: {
       'mt-swipe': Swipe,
       'mt-swipe-item': SwipeItem
     },
     data () {
       return {
         imglist1: [
           {img: 'banner1.png', text: '2022/03/09-2022/03/23', num: 1},
           {img: 'banner3.png', text: '2022/03/09-2022/03/23', num: 2}
         ]
       }
     }
   }
   </script>
   <style scoped>
   .miyt{
     width: 3.51rem;
     height: 0.9rem;
     margin: 0 auto;
   }
   img{
     width: 100%;
     height: 100%;
   }
   .miyt >>> .mint-swipe-indicators{
     bottom: 0.01rem;
   }
   .miyt >>> .mint-swipe-indicator.is-active{
     background-color: #01CDA7;
   }
   .miyt >>> .mint-swipe-indicator{
     opacity: 1;
     background-color: #E5E5E4;
   }
   </style>