mx-swiper 轮播图

用于导航轮播，广告展示等场景,可开箱即用,支持自定义指示器模式，3D轮播图效果，配置显示标题，设置加载状态和嵌入视频。

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-swiper": "/miniprogram_npm/m-ui/mx-swiper/index"
}

小程序码

可使用微信扫码查看小程序码

#

代码演示

基本用法

通过list参数传入轮播图列表值，该值为一个数组，键值为图片路径。

<mx-swiper list="{{list1}}" bind:change="change" bind:click="click"></mx-swiper>

Page({
  data: {
   list1: [
      'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152510859.png',
      'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152448695.png',
      'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152514533.png',
    ],
  }
});

带标题

添加showTitle属性以展示标题，此时list的参数应为一个对象：例如： （请注意：您期望使用对象作为参数时，需要配置mx-swiper组件的keyName参数为您当前对象的图片key值）如：keyName="image"

<mx-swiper list="{{list2}}" keyName="image" showTitle autoplay="{{false}}" circular></mx-swiper>

Page({
  data: {
   list2: [
      {
        image: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152448695.png',
        title: '昨夜星辰昨夜风，画楼西畔桂堂东',
        type: 'image',
      },
      {
        image: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152510859.png',
        title: '身无彩凤双飞翼，心有灵犀一点通',
      },
      {
        image: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152514533.png',
        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
      },
    ],
  }
});

带指示器

通过indicator属性添加指示器。

<mx-swiper list="{{list1}}" indicator indicatorMode="line" circular></mx-swiper>

加载中

通过添加loading属性达到加载中的状态。

<mx-swiper list="{{list3}}" loading></mx-swiper>

嵌入视频

我们提供了嵌入视频的能力，为避免资源浪费，在您切换轮播的时候视频会停止播放，你可以设置poster指定视频封面。

<mx-swiper list="{{list4}}" keyName="url" autoplay="{{false}}"></mx-swiper>

Page({
  data: {
   list4: [
      {
        url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
        title: '昨夜星辰昨夜风，画楼西畔桂堂东',
        poster: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152510859.png',
      },
      {
        url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152448695.png',
        title: '身无彩凤双飞翼，心有灵犀一点通',
      },
      {
        url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152514533.png',
        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
      },
    ],
  }
});

指定类型

默认会根据链接自动判断swiper-item类型，但是在极端情况下可能会不准确，所以我们提供了指定item的类型，通过设置type为video或image即可。

<mx-swiper list="{{list4}}" keyName="url" autoplay="{{false}}"></mx-swiper>

Page({
  data: {
   list4: [
      {
        url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
        type: 'video'
        title: '昨夜星辰昨夜风，画楼西畔桂堂东',
        poster: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152510859.png',
      },
      {
        url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152448695.png',
        title: '身无彩凤双飞翼，心有灵犀一点通',
        type: 'image'
      },
      {
        url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152514533.png',
        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
      },
    ],
  }
});

自定义指示器

如您需要以指示点或数字形式来自定义指示器，请参考如下案例

<mx-swiper list="{{list5}}" bind:change="change1" autoplay="{{false}}">
        <view slot="indicator" class="indicator">
          <view
            wx:for="{{list1}}"
            wx:for-item="item"
            wx:key="index"
            class="indicator__dot {{index === current && 'indicator__dot--active'}}"
          >
          </view>
        </view>
      </mx-swiper>
      <mx-divider borderHeight="15px"></mx-divider>
      <mx-swiper list="{{list1}}" bind:change="change2" autoplay="{{false}}" indicatorStyle="right: 20px">
        <view slot="indicator" class="indicator-num">
          <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
        </view>
      </mx-swiper>

.indicator
{
	display:flex;
	flex-direction:row;
	justify-content:center;
}

.indicator__dot
{
	height:6px;
	width:6px;
	border-radius:100px;
	background-color:rgba(255,255,255,0.35);
	transition:background-color .3s;
	margin:0 5px;
}

.indicator__dot--active
{
  width: 12px;
	background-color:#fff;
}

.indicator-num
{
	background-color:rgba(0,0,0,0.35);
	border-radius:100px;
	width:35px;
	display:flex;
	justify-content:center;
	padding:2px 0;
}

.indicator-num__text
{
	color:#FFF;
	font-size:12px;
}

卡片式轮播

如您需要以指示点或数字形式来自定义指示器，请参考如下案例

 <mx-swiper list="{{list1}}" height="140" previousMargin="30" nextMargin="30" circular bgColor="#ffffff"></mx-swiper>

API

Swiper Props

参数	说明	类型	默认值
list	轮播图数据	Array	[]
indicator	是否显示面板指示器	boolean	false
indicator-active-color	指示器激活的颜色	string	#ffffff
indicator-inactive-color	指示器非激活颜色	string	rgba(255, 255, 255, 0.5)
indicator-style	指示器样式，可通过bottom left right进行定位	String,Object	-
indicator-mode	指示器模式，可选值line dot	string	dot
autoplay	是否自动切换	boolean	true
current	当前所在滑块的 index	number,string	0
currentItemId	当前所在滑块的 item-id ，不能与 current 被同时指定	string	-
interval	滑块自动切换时间间隔（ms）	string,number	5000
duration	滑块切换过程所需时间（ms）	string,number	300
circular	是否循环播放	boolean	false
previous-margin	前边距，可用于露出前一项的一小部分	string,number	0
next-margin	后边距，可用于露出后一项的一小部分	string,number	0
acceleration	当开启时，会根据滑动速度，连续滑动多屏	bealoon	false
display-multiple-items	同时显示的滑块数量	number	1
easing-function	指定swiper切换缓动动画类型，可选值linear easeInCubic easeOutCubic easeInOutCubic	string	default
key-name	list数组中指定对象的目标属性名	string	url
img-mode	图片的裁剪模式,可选值可见微信图片裁剪	string	aspectFill
height	组件高度	string，number	140
bg-color	背景颜色	string	#f3f4f6
radius	滑块切换过程所需时间（ms）	string,number	300
loading	是否加载中	boolean	false
previous-margin	前边距，可用于露出前一项的一小部分	string,number	0
show-title	是否显示标题，要求数组对象中有title属性	boolean	false

Swiper Events

事件名	说明	参数
bind:click	点击轮播图时触发	index：点击了第几张图片，从0开始
bind:change	轮播图切换时触发(自动或者手动切换)	index：切换到了第几张图片，从0开始

SwiperIndicator Props

参数	说明	类型	默认值
length	轮播的长度	string,number	0
current	当前处于活动状态的轮播的索引	string,number	0
indicator-active-color	指示器非激活颜色	string	-
indicator-inactive-color	指示器非激活颜色	string	-
indicator-style	指示器模式，可选值line dot	string	dot