王明 / Recruitment

  <template>

  	<view class="u-swiper-wrap" :style="{
  		borderRadius: `${borderRadius}rpx`
  	}">
  		<swiper :current="elCurrent" @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay"
  		 :previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
  		 :style="{
  				height: height + 'rpx',
  				backgroundColor: bgColor
  			}">
  			<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
  				<view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[uCurrent != index ? 'u-list-scale' : '']" :style="{
  						borderRadius: `${borderRadius}rpx`,
  						transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
  						margin: effect3d && uCurrent != index ? '0 20rpx' : 0,
  					}">
  					<image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image>
  					<view v-if="title && item.title" class="u-swiper-title u-line-1" :style="[{
  							'padding-bottom': titlePaddingBottom
  						}, titleStyle]">
  						{{ item.title }}
  					</view>

  				</view>
  			</swiper-item>
  		</swiper>

  		<view class="u-swiper-indicator" :style="{
  				top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
  				bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto',
  				justifyContent: justifyContent,
  				padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
  			}">
  			<block v-if="mode == 'rect'">
  				<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == uCurrent }" v-for="(item, index) in list"
  				 :key="index"></view>
  			</block>
  			<block v-if="mode == 'dot'">
  				<view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == uCurrent }" v-for="(item, index) in list"
  				 :key="index"></view>
  			</block>
  			<block v-if="mode == 'round'">
  				<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == uCurrent }" v-for="(item, index) in list"
  				 :key="index"></view>
  			</block>
  			<block v-if="mode == 'number'">
  				<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view>
  			</block>

  		</view>
  	</view>
  </template>
  
  <script>

  	/**

  	 * swiper 轮播图
  	 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用

  	 * @tutorial https://www.uviewui.com/components/swiper.html

  	 * @property {Array} list 轮播图数据，见官网"基本使用"说明
  	 * @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false）
  	 * @property {String} mode 指示器模式，见官网说明（默认round）
  	 * @property {String Number} height 轮播图组件高度，单位rpx（默认250）
  	 * @property {String} indicator-pos 指示器的位置（默认bottomCenter）
  	 * @property {Boolean} effect3d 是否开启3D效果（默认false）
  	 * @property {Boolean} autoplay 是否自动播放（默认true）
  	 * @property {String Number} interval 自动轮播时间间隔，单位ms（默认2500）
  	 * @property {Boolean} circular 是否衔接播放，见官网说明（默认true）
  	 * @property {String} bg-color 背景颜色（默认#f3f4f6）
  	 * @property {String Number} border-radius 轮播图圆角值，单位rpx（默认8）
  	 * @property {Object} title-style 自定义标题样式
  	 * @property {String Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50）
  	 * @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill）
  	 * @event {Function} click 点击轮播图时触发
  	 * @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>

  	 */
  	export default {

  		name: "u-swiper",
  		props: {
  			// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
  			list: {
  				type: Array,
  				default () {
  					return [];
  				}
  			},
  			// 是否显示title标题
  			title: {
  				type: Boolean,
  				default: false
  			},
  			// 用户自定义的指示器的样式
  			indicator: {
  				type: Object,
  				default () {
  					return {};
  				}
  			},
  			// 圆角值
  			borderRadius: {
  				type: [Number, String],
  				default: 8
  			},
  			// 隔多久自动切换
  			interval: {
  				type: [String, Number],
  				default: 3000
  			},
  			// 指示器的模式，rect|dot|number|round
  			mode: {
  				type: String,
  				default: 'round'
  			},
  			// list的高度，单位rpx
  			height: {
  				type: [Number, String],
  				default: 250
  			},
  			// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
  			indicatorPos: {
  				type: String,
  				default: 'bottomCenter'
  			},
  			// 是否开启缩放效果
  			effect3d: {
  				type: Boolean,
  				default: false
  			},
  			// 3D模式的情况下，激活item与前后item之间的距离，单位rpx
  			effect3dPreviousMargin: {
  				type: [Number, String],
  				default: 50
  			},
  			// 是否自动播放
  			autoplay: {
  				type: Boolean,
  				default: true
  			},
  			// 自动轮播时间间隔，单位ms
  			duration: {
  				type: [Number, String],
  				default: 500
  			},
  			// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
  			circular: {
  				type: Boolean,
  				default: true
  			},
  			// 图片的裁剪模式 
  			imgMode: {
  				type: String,
  				default: 'aspectFill'
  			},
  			// 从list数组中读取的图片的属性名
  			name: {
  				type: String,
  				default: 'image'
  			},
  			// 背景颜色
  			bgColor: {
  				type: String,
  				default: '#f3f4f6'
  			},
  			// 初始化时，默认显示第几项
  			current: {
  				type: [Number, String],
  				default: 0
  			},
  			// 标题的样式，对象形式
  			titleStyle: {
  				type: Object,
  				default() {
  					return {}
  				}

  			}
  		},
  		watch: {

  			// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出
  			list(nVal, oVal) {
  				if(nVal.length !== oVal.length) this.uCurrent = 0;
  			},
  			// 监听外部current的变化，实时修改内部依赖于此测uCurrent值，如果更新了current，而不是更新uCurrent，
  			// 就会错乱，因为指示器是依赖于uCurrent的
  			current(n) {
  				this.uCurrent = n;

  			}
  		},

  		data() {
  			return {
  				uCurrent: this.current // 当前活跃的swiper-item的index
  			};
  		},

  		computed: {

  			justifyContent() {
  				if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
  				if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
  				if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
  			},
  			titlePaddingBottom() {
  				let tmp = 0;
  				if (this.mode == 'none') return '12rpx';
  				if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
  					tmp = '60rpx';
  				} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
  					tmp = '40rpx';
  				} else {
  					tmp = '12rpx';

  				}

  				return tmp;
  			},
  			// 因为uni的swiper组件的current参数只接受Number类型，这里做一个转换
  			elCurrent() {
  				return Number(this.current);

  			}
  		},
  		methods: {

  			listClick(index) {
  				this.$emit('click', index);

  			},

  			change(e) {
  				let current = e.detail.current;
  				this.uCurrent = current;
  				// 发出change事件，表示当前自动切换的index，从0开始
  				this.$emit('change', current);

  			},

  			// 头条小程序不支持animationfinish事件，改由change事件
  			// 暂不监听此事件，因为不再给swiper绑定uCurrent属性
  			animationfinish(e) {
  				// #ifndef MP-TOUTIAO
  				// this.uCurrent = e.detail.current;
  				// #endif

  			}

  		}
  	};

  </script>
  
  <style lang="scss" scoped>

  	@import "../../libs/css/style.components.scss";
  	
  	.u-swiper-wrap {

  		position: relative;
  		overflow: hidden;

  		transform: translateY(0);
  	}

  	.u-swiper-image {
  		width: 100%;
  		will-change: transform;
  		height: 100%;
  		/* #ifndef APP-NVUE */
  		display: block;
  		/* #endif */
  		/* #ifdef H5 */
  		pointer-events: none;
  		/* #endif */
  	}

  	.u-swiper-indicator {
  		padding: 0 24rpx;
  		position: absolute;
  		@include vue-flex;
  		width: 100%;
  		z-index: 1;
  	}

  	.u-indicator-item-rect {
  		width: 26rpx;
  		height: 8rpx;
  		margin: 0 6rpx;
  		transition: all 0.5s;
  		background-color: rgba(0, 0, 0, 0.3);
  	}

  	.u-indicator-item-rect-active {
  		background-color: rgba(255, 255, 255, 0.8);
  	}

  	.u-indicator-item-dot {
  		width: 14rpx;
  		height: 14rpx;
  		margin: 0 6rpx;
  		border-radius: 20rpx;
  		transition: all 0.5s;
  		background-color: rgba(0, 0, 0, 0.3);
  	}

  	.u-indicator-item-dot-active {
  		background-color: rgba(255, 255, 255, 0.8);
  	}

  	.u-indicator-item-round {
  		width: 14rpx;
  		height: 14rpx;
  		margin: 0 6rpx;
  		border-radius: 20rpx;
  		transition: all 0.5s;
  		background-color: rgba(0, 0, 0, 0.3);
  	}
  
  	.u-indicator-item-round-active {
  		width: 34rpx;
  		background-color: rgba(255, 255, 255, 0.8);
  	}
  
  	.u-indicator-item-number {
  		padding: 6rpx 16rpx;
  		line-height: 1;
  		background-color: rgba(0, 0, 0, 0.3);
  		border-radius: 100rpx;
  		font-size: 26rpx;
  		color: rgba(255, 255, 255, 0.8);
  	}
  
  	.u-list-scale {
  		transform-origin: center center;
  	}
  
  	.u-list-image-wrap {
  		width: 100%;
  		height: 100%;
  		flex: 1;
  		transition: all 0.5s;
  		overflow: hidden;
  		box-sizing: content-box;
  		position: relative;
  	}
  
  	.u-swiper-title {
  		position: absolute;
  		background-color: rgba(0, 0, 0, 0.3);
  		bottom: 0;
  		left: 0;
  		width: 100%;
  		font-size: 28rpx;
  		padding: 12rpx 24rpx;
  		color: rgba(255, 255, 255, 0.9);
  	}
  
  	.u-swiper-item {
  		@include vue-flex;
  		overflow: hidden;
  		align-items: center;

  	}
  </style>