mp-ui-user/components/prize-news/prize-news.vue

<!-- 横向滚动播放 -->
<template>
	<view class='text-scroll-wrap'>
		<view class="text-content" :style="{ left:leftMove+'px' }">
			<view class="text-item" v-for="(item,index) in myList" :key="index">
				<view class="text">
					<image :src="item.avatar" class="image"></image>
					<view class="title">
						<view class="name">恭喜</view>
						<view class="prize">{{ item.nickName }}</view>
						<view class="name">{{ item.type == 1 ? '刮出了' : '兑换了' }}</view>
						<view class="prize">{{ item.prizeInfo }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'prize-news',
		components: {},
		props: {
			list: { // 滚动列表
				type: Array,
				default: () => {
					return [{
						nickName: '测试'
					},{
						nickName: '测试'
					}];
				}
			},
			type: { // 类型
				type: String,
				default: 'text',
				validator: (value) => {
					return ['text', 'image'].indexOf(value) !== -1;
				}
			},
			textKey: { // 文字key值
				type: String,
				default: ''
			},
			imageKey: { // 图片key值
				type: String,
				default: ''
			},
			actives: { // 如果需要，此为已选列表
				type: Array,
				default: () => {
					return [];
				}
			},
			duration: { // 间隔时间
				type: [Number, String],
				default: 20
			},
			delay: { // 延迟时间
				type: [Number, String],
				default: 0
			},
			initPosition: { // 初始位置
				type: String,
				default: 'left',
				validator: (value) => {
					return ['left', 'right'].indexOf(value) !== -1;
				}
			}
		},
		data() {
			return {
				myList: [],
				leftMove: 0,
				firstItemWidth: 0,
				wrapWidth: 0,
			};
		},
		// 组件实例化之前
		beforeCreate() {},
		// 组件创建完成
		created() {
			this.myList = this.list;
		},
		// 组件挂载之前
		beforeMount() {},
		// 组件挂载之后
		mounted() {
			let query = uni.createSelectorQuery().in(this);
			query.select('.text-item').boundingClientRect(data => {
				this.firstItemWidth = data.width;
			}).exec();
			query.select('.text-scroll-wrap').boundingClientRect(data => {
				this.wrapWidth = data.width;
				this.initPosition === 'left' ? this.leftMove = 0 : this.leftMove = this.wrapWidth;
			}).exec();
			if (this.delay <= 0) {
				this.scrollContent();
			} else {
				let t = setTimeout(() => {
					clearTimeout(t);
					this.scrollContent();
				}, Number(this.delay));
			}

		},
		// 组件数据更新时
		beforeUpdate() {},
		// 组价更新
		updated() {},
		// 组件销毁前
		beforeDestroy() {},
		// 组件销毁后
		destroyed() {},
		// 页面方法
		methods: {
			// 点击此项
			clickThis(e) {
				// console.log(e.currentTarget.dataset.text);
				this.$emit('change', e.currentTarget.dataset.text);
			},
			// 滚动
			scrollContent() {
				let num = this.initPosition === 'left' ? 0 : this.wrapWidth;
				setInterval(() => {
					num--;
					if (num < 0 && Math.abs(num) >= this.firstItemWidth) {
						this.myList.push(this.myList[0]);
						this.myList.splice(0, 1);
						num += this.firstItemWidth;
						let query = uni.createSelectorQuery().in(this);
						query.selectAll('.text-item').boundingClientRect(data => {
							this.firstItemWidth = data[1].width;
						}).exec();
					}
					this.leftMove = num;
				}, Number(this.duration));
			}
		}
	};
</script>

<style lang='scss'>
	.text-scroll-wrap {
		overflow: hidden;
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		margin-bottom: 12rpx;
		position: relative;

		.text-content {
			display: inline-block;
			white-space: nowrap;
			height: 100%;
			position: absolute;
			top: 0;

			.text-item {
				height: 100%;
				display: inline-block;
				overflow: hidden;
				font-size: 28rpx;
				color: #666;

				.text {
					display: flex;
					align-items: center;
					height: 50rpx;
					padding: 0 40rpx 0 4rpx;
					margin: 0 60rpx;
					background: rgba(255, 255, 255, .5);
					border-radius: 25rpx;
					font-size: 24rpx;

					.image {
						display: inline-block;
						width: 46rpx;
						height: 46rpx;
						vertical-align: middle;
						border-radius: 50%;
					}
					
					.title {
						display: flex;
						align-items: center;
						
						.name{
							margin: 0 16rpx;
						}
						
						.prize{
							color: #F27120;
						}
					}
				}

				&.active .text {
					background: #1E90FF;
					color: #fff;
				}
			}
		}
	}
</style>