@retailwe/ui-swiper NPM

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`	-