SpecialDisplay多个大图轮滑展示，带头部切换块。头部和标点随图片自动切换。

安装

新项目用npm init -y命令初始化一下

安装依赖组件

npm install mini-ali-ui --save

安装

npm install specialdisplay --save

使用说法

// ***.json
{
  "usingComponents": {
    "special-display": "specialdisplay"
  }
}

基本用法

<view class="s-index">
  <special-display listData="{{listData}}" indicatorBottom="{{200}}"></special-display>
</view>

slot

<view class="s-index">
  <special-display listData="{{listData}}">
    <view a:for="{{listData}}" slot="aux{{index}}" class="aux">
      <view class="test-drive">
        预约试驾
      </view>
    </view>
  </special-display>
</view>

数据格式

   listData: [
      {
        title: '宝宝马', imgUrl: '/access/images/002.jpg'
      },
      {
        title: '大猫', imgUrl: '/access/images/003.jpg'
      },
      {
        title: '小猫', imgUrl: '/access/images/004.jpg'
      },
      {
        title: '闪电猫', imgUrl: '/access/images/003.jpg'
      },
      {
        title: '小飞猫', imgUrl: '/access/images/004.jpg'
      },
    ]

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---| :--- | :-- | :--- | :--- | | listData | 数据列表 | array | - | - | | indicatorDots | 是否显示指示点| Boolean | - | false | | indicatorColor | 指示点颜色 | Color | - | rgba(255, 255, 255, 1) | | indicatorActiveColor | 当前选中的指示点颜色 | Color | - | rgba(76, 191, 198, 1) | | indicatorBottom | 指示点距底部距离 | Number | - | 400(rpx)| | navVisible | 是否显示导航 | Boolean | - | true| | navTop | 导航距头部距离 | Number | - | 120(rpx)| | autoplay | 是否自动切换 | Boolean | - | false | | interval | 自动切换时间间隔 | Number | - | 5000(ms) | | circular | 是否启用无限滑动 | Boolean | - | false | | duration | 滑动动画时长。 | Number | - | 600(ms) | | fontSize | 字体大小 | Number | - | 36(rpx) | | fontColor | 头部文字字体颜色 | Color | - | #FFFFFF |

slot

| 名称 | 说明 | 回调参数 | | :---| :--- | :-- | | aux{{index}} | 插槽名称 | - | | | | - |