swiper 商品图片展示组件

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-swiper": "@retailwe/ui-swiper/index"
}

代码演示

基础用法

通过imgSrcs属性传入多张商品图片

<wr-swiper imgSrcs="{{imgSrcs}}"></wr-swiper>

// 模式一
Page({
  data: {
    imgSrcs: [
      'https://inews.gtimg.com/newsapp_bt/0/11292297544/1000',
      'https://inews.gtimg.com/newsapp_bt/0/11292420273/1000',
      'https://inews.gtimg.com/newsapp_bt/0/11292297544/1000',
    ],
  },
  onLoad() {},
  onShow() {},
});
// 模式二
Page({
  data: {
    imgSrcs: [{
      src: 'https://inews.gtimg.com/newsapp_bt/0/11292297544/1000',
      height: 400;
      width: 300
    }
    ],
  },
  onLoad() {},
  onShow() {},
});

点状指示器

<wr-swiper
  imgSrcs="{{imgSrcs}}"
  mode="dot">
</wr-swiper>

箭头指示器

<wr-swiper
  imgSrcs="{{imgSrcs}}"
  mode="direction">
</wr-swiper>

数字指示器

<wr-swiper
  imgSrcs="{{imgSrcs}}"
  mode="number">
</wr-swiper>

点击全屏查看

<wr-swiper
  imgSrcs="{{imgSrcs}}"
  full-screen="{{isFullScreen}}"
  bindtap="onSwiperTap">
</wr-swiper>

Page({
  data: {
    imgSrcs: [
      'https://inews.gtimg.com/newsapp_bt/0/11292297544/1000',
      'https://inews.gtimg.com/newsapp_bt/0/11292420273/1000',
    ],
    isFullScreen: false,
  },
  onSwiperTap() {
    this.setData({
      'isFullScreen': !this.data.isFullScreen,
    });
  },
});

API

Props

| 参数 | 说明 | 类型 | 默认值 | 说明 | |-----------|-----------|-----------|-------------|-------------| | imgSrcs | 商品图片地址数组 | array | [] | - | | duration | 滑动动画时长| number | 500 | - | | autoplay | 是否自动切换 | boolean | false | - | | interval | 自动切换时间间隔 | number | 5000 | - | | circular | 是否采用衔接滑动（循环）| boolean | true | - | | mode | 面板指示类型 | string | '' | 点-'dot'、数字-'number'、左右-'direction' | | dots | 指示点数组，仅当mode为dot时有效 | array | - | 数组结构为{type: string, value: string}, type可选值img/icon/text | | current | 当前展示图片的索引 | number | 0 | - | | maxHeight | swiper最大高度 | number | 300 | 单位是rpx | | imageMode | 图片填充模式，参考原生image的mode属性 | string | aspectFill | - | | fullScreen | 是否全屏展示 | boolean | false | - |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | tapImage | 点击图片时触发 | index，被点击的图片索引 | | change | 图片切换时触发 | index，切换后显示的图片索引 |

外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点外部样式类 | | wr-dot-class | 指示点样式 | | wr-dot-active-class | 指示点激活时的样式 |