ColorUI 开发文档ColorUI 开发文档
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
指南
组件
实验室
Api
更新日志
  • uni-app版
  • 2.x版本
  • GitHub 仓库
  • Gitee 仓库
  • 组件

    • 引用组件
    • 主题 ui-change-theme
    • 导航栏 ui-navbar
    • 头像 ui-avatar
    • 标题 ui-title
    • 标签 ui-tag
    • 按钮 ui-btn
    • 图片 ui-img
    • 代码 ui-code
    • 进度条 ui-progress
    • 加载 ui-loading
    • 菜单 ui-menu
    • 浮动 ui-fixed
    • 卡片 ui-card
    • 栅栏 ui-grid
    • 气泡框 ui-popover
    • 模态框 ui-modal
    • 轻提示 $tips
    • 选项卡 ui-tab
    • 轮播图 ui-swiper
    • 步骤条 ui-steps
    • 输入框 ui-input
    • 单选框 ui-radio
    • 复选框 ui-checkbox
    • 开关 ui-switch

轮播图 ui-swiper

"usingComponents": {
    "ui-swiper": "/mp-cu/colorUI/components/ui-swiper/ui-swiper"
}

默认

dotStyle='default'

mp-cu

<ui-swiper info="{{[{img:'xxx', type: 'url'}, {img:'xxx', type: 'path'}]}}" dotCur="ui-BG-Main"/>

long

dotStyle='long'

mp-cu

<ui-swiper info="{{[{img:'xxx', type: 'url'}, {img:'xxx', type: 'path'}]}}" dotStyle="long" dotCur="bg-white"/>

line

dotStyle='line'

mp-cu

<ui-swiper info="{{[{img:'xxx', type: 'url'}, {img:'xxx', type: 'path'}]}}" dotStyle="line" dotCur="bg-white"/>

tag

dotStyle='tag'

mp-cu

<ui-swiper info="{{[{img:'xxx', type: 'url'}, {img:'xxx', type: 'path'}]}}" dotStyle="tag" dotCur="bg-mask-50"/>

card

mode='card'

mp-cu

<ui-swiper info="{{[{img:'xxx', type: 'url'}, {img:'xxx', type: 'path'}]}}" 
           mode="card" dotStyle="long" dotCur="bg-blue" height="380rpx" imgHeight="300rpx"/>

hotelCard

mode='hotelCard'

mp-cu

<ui-swiper info="{{[{img:'xxx', type: 'url'}, {img:'xxx', type: 'path'}]}}" mode="hotelCard" dotStyle="line" dotCur="bg-white"/>

hotelDetail

mode='hotelDetail'

mp-cu

<ui-swiper info="{{[{img:'xxx', type: 'url'}, {img:'xxx', type: 'path'}]}}" mode="hotelDetail" 
           dotStyle="line" dotCur="bg-white" height="300rpx" imgHeight="300rpx"/>

数据格式

<ui-swiper info="{{swiperList}}" dotCur="ui-BG-Main" bind:uiTap="swiperTap"/>

type: switchTab reLaunch redirectTo navigateTo eve

//type: switchTab/reLaunch/redirectTo/navigateTo/eve
swiperList: [
    {
        img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg',
        url: '/pages/document/system/system',
        type: 'navigateTo' //直接跳转类型
    },
    {
        img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
        url: '/pages/custom/home',
        type: 'switchTab' //直接跳转类型
    },
    {
        img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg',
        type: 'eve' //事件方式
    },
    {
        img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
        type: 'eve'
    },
]

参数

参数类型可选值默认值说明
circularBoolean-true-
autoplayBoolean-true-
intervalNumber-3000-
durationNumber-800-
infoArray--数据
swiperCssString-bg-none-
modeString-default-
dotStyleString-default-
dotCurString-bg-black-
heightString-272rpx-
imgHeightString-272rpx-
imgNameString-img-
bind:uiTapEvent--点击事件
Prev
选项卡 ui-tab
Next
步骤条 ui-steps