zd_wechatApp/components/yxp-txt-scroll/yxp-txt-scroll.nvue

<template>
	<view class="container-gg" :style="{minHeight: fontSize + 'rpx'}">
		<view class="notice-text-box" ref="yxpTxtBox" id="yxpTxtBox">
			<view class="notice-text-con" ref="yxpTxt" id="yxpTxt"
				:style="{animationDuration: (durationB || duration) / 1000 + 's',animationDelay: delay / 1000 + 's', paddingLeft: boxWidth + 'px'}">
				<text class="notice-text" v-for="(item,index) in text" :key="index" :style="{fontSize:fontSize+'rpx', color: fontColor, 
					paddingRight: (index === text.length - 1) ? '0' : txtPadding + 'rpx'}"
					@click="Select(item)">{{item.noticeTitle}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	// #ifdef APP-NVUE
	const Binding = uni.requireNativePlugin('bindingx');
	const dom = weex.requireModule('dom');
	// #endif
	export default {
		props: {
			text: {
				type: Array,
				default: []
			},
			fontSize: {
				type: String,
				default: '24'
			},
			fontColor: {
				type: String,
				default: '#fff'
			},
			duration: {
				type: String,
				default: '0'
			},
			delay: {
				type: String,
				default: '0'
			},
			txtPadding: {
				type: String,
				default: '30'
			},
			speed: {
				type: String,
				default: '200'
			}
		},
		computed: {},
		data() {
			return {
				x: 0,
				gesToken: 0,
				textWidth: 0,
				boxWidth: 375,
				durationB: 0
			}
		},
		mounted() {
			this.initScrollWidth()
		},
		methods: {
			Select(item) {
				this.$emit("onClick", item)
				// this.$parent.open=false;
			},
			initScrollWidth: function() {
				let self = this;
				// #ifdef APP-NVUE
				setTimeout(() => {
					dom.getComponentRect(this.$refs.yxpTxtBox, res => {
						this.boxWidth = res.size.width;
						dom.getComponentRect(this.$refs.yxpTxt, res => {
							this.textWidth = res.size.width - 375 + this.boxWidth;
							if (!this.duration || this.duration === 0 || this.duration ===
								'0') {
								this.durationB = parseInt(this.textWidth / parseFloat(this
									.speed) * 1000)
							}
							this.bindTiming()
						});
					});

				}, 500);
				// #endif
				// #ifndef APP-NVUE
				let viewBox = uni.createSelectorQuery().in(this).select('#yxpTxtBox');
				viewBox.fields({
					size: true,
					rect: true
				}, data => {
					self.boxWidth = data.width
					let view = uni.createSelectorQuery().in(self).select('#yxpTxt');
					view.fields({
						size: true,
						rect: true
					}, data => {
						self.textWidth = data.width
						if (!self.duration || self.duration === 0 || self.duration === '0') {
							self.durationB = parseInt(self.textWidth / parseFloat(self.speed) * 1000)
						}
					}).exec();
				}).exec();

				// #endif
			},
			getEl: function(el) {
				if (typeof el === 'string' || typeof el === 'number') return el;
				// #ifdef APP-PLUS
				if (WXEnvironment) {
					return el.ref;
				} else {
					return el instanceof HTMLElement ? el : el.$el;
				}
				// #endif
				// #ifdef H5
				return el instanceof HTMLElement ? el : el.$el;
				// #endif
			},
			bindTiming: function() {
				this.isInAnimation = true;
				var my = this.getEl(this.$refs.yxpTxt);
				var self = this;
				var textWidth = -this.textWidth;
				var delay = parseInt(this.delay);
				var duration = this.durationB || this.duration;
				var translate_x_origin = 'linear(t,0,' + textWidth + ',' + duration + ')';
				setTimeout(() => {
					var result = Binding.bind({
						eventType: 'timing',
						exitExpression: 't>' + duration,
						props: [{
							element: my,
							property: 'transform.translateX',
							expression: translate_x_origin
						}]
					}, function(e) {
						if (e.state === 'end' || e.state === 'exit') {
							Binding.unbind({
								eventType: 'timing',
								token: result.gesToken
							});
							self.bindTiming()
						}
					});
					self.gesToken = result.token;
				}, delay)

			}
		},
	}
</script>
<style>
	.container-gg {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/* #ifndef APP-PLUS */
		height: 100%;
		width: 100%;
		/* #endif */
	}

	.notice-text-box {
		display: flex;
		flex-direction: column;
		position: relative;
		/* #ifndef APP-PLUS */
		height: 100%;
		width: 100%;
		/* #endif */
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.notice-text-con {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: pre;
		-webkit-animation: scroll-left 3s infinite linear;
		animation: scroll-left 3s infinite linear;
		left: 0;
		padding-left: 100%;
		/* #endif */
		position: absolute;
		/* #ifdef APP-NVUE */
		left: 0;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	@-webkit-keyframes scroll-left {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
	}

	@keyframes scroll-left {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
	}

	/* #endif */
</style>