轮播图 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--点击事件
上次更新: