更新记录

1.0.2（2021-01-20）

金字塔模式下一张图片，会导致主屏不显示

1.0.1（2020-07-27）

20200727：数字角标不变化bug

1.0.0（2020-07-24）

20200724：提交

平台兼容性

mosowe-swiper：适用于uni-app的轮播图插件

轮播组件，本插件兼容H5、APP、微信小程序、支付宝小程序

组件功能

1. 普通轮播（文本、图片，图文轮播，支持上下、左右轮播）
2. 堆叠轮播（图片）
3. 图片预览（图片）
4. 数字角标

使用方式

若page.json中配置了"easycom": true，则无需script引入就可以使用，没有则需要引入。

属性

事件

示例

1. 图片轮播

banner: [
    {
        image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg',
    },
    {
        image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595526004030&di=4be554bfcbc76570e275724fd10cb11c&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg',
    },
    {
        image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595526004029&di=2feebadbbdcf7db486a58ce72d5a263b&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01dfcbc38578dac4c2.jpg'
    }
],

<mosowe-swiper
    :lists="banner"
    :touchable="false"
    indicator="dots"
    imageKey="image"
    previewImage
    pyramid
    pyramidMargin="90rpx"
    @change="bannerChange"
    />

2. 文字轮播

text: [
    {
        title: '车静安寺客户嘎哈放框架傲胜'
    },
    {
        title: '任务的确认吧是发是对方是个地方个三四个'
    },
    {
        title: '接口环境看是否度萨芬，吧撒打发看了会焦点时发卡机撒打发'
    },
],

<view class='swiper'>
    <mosowe-swiper
        :lists="text"
        :touchable="true"
        vertical
        swiperType="text"
        textKey="title"
        :height="80"
        />
</view>

文本文字的大小、颜色等可在调用的父级直接更改：

.swiper{
    height: 80rpx;
    font-size: 28rpx;
    line-height: 80rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #fe8252;
    color: #fff;
    }

3. 不带key的文字

text2: [
    '车静安寺客户嘎哈放框架傲胜',
    '任务的确认吧是发是对方是个地方个三四个',
    '接口环境看是否度萨芬，吧撒打发看了会焦点时发卡机撒打发'
],

<mosowe-swiper
    :lists="text2"
    :touchable="false"
    vertical
    swiperType="text"
    :height="80"
    />

预览地址