更新记录

1.0.3（2025-02-27）

更新为uni_modules插件

1.0.2（2021-01-20）

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

1.0.1（2020-07-27）

20200727：数字角标不变化bug

平台兼容性

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" />

版本修复

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