更新记录

1.0.0（2023-03-15） 下载此版本

轮播组件

平台兼容性

示例依赖了uni-swiper-dot uni-card uni-section uni-scss 等多个组件，直接拷贝示例代码将无法正常运行 到HBuilderX插件市场去下载组件就行了

快速上手

<template>
    <view class="content">
      <swiper-dot-item 
          :swiperBanner="swiper_Banner"
          :autoplay="true"
          :duration="300"
          :interval="8000"
          :dotsStyles="dotsStyles"
          :height="400"
          ></swiper-dot-item>
    </view>
  </template>

  <script>
  import swiperDotItem from "../../components/swiper-dot-item/swiper-dot-item.vue";
    export default {
      components: { swiperDotItem },
      data() {
        return {
          dotsStyles: {
            backgroundColor: 'rgba(255, 255, 255, .3)',//未选择指示点背景色
            border: '1px rgba(255, 255, 255, .0) solid',//未选择指示点边框样式
            selectedBackgroundColor: '#fff', //已选择指示点背景色，在 mode = nav 时不生效
            selectedBorder: '1px rgba(0, 0, 0, .0) solid',//已选择指示点边框样式，在 mode = nav 时不生效
          },
          swiper_Banner:[
            {ImageUrl:'/static/swiper-dot-item/a.png'},
          { ImageUrl: '/static/swiper-dot-item/b.png' },
          { ImageUrl: '/static/swiper-dot-item/a.png' },
          { ImageUrl: '/static/swiper-dot-item/b.png' },
          { ImageUrl: '/static/swiper-dot-item/a.png' },
          { ImageUrl: '/static/swiper-dot-item/b.png' },
          ]
        }
      },
      onLoad() {

      },
      methods: {

      }
    }
  </script>

参数

swiperBanner 轮播图数据

duration 自动切换时间间隔

autoplay 是否自动切换

dotsStyles 指示点样式,详细参数参考uniapp https://uniapp.dcloud.net.cn/component/uniui/uni-swiper-dot.html#dotsstyles-options

height 轮播图高度（单位：rpx）

mode 指示点的类型，可选值：default 、round 、nav 、 indexes

@change 事件（返回下标）