fanyunAi/components/noticeBar/index.vue

<template>
	<view class="">
		<view class="u-notice " @tap="clickHandler">
			<view class="u-notice__content twoLine" ref="u-notice__content">
				<view ref="u-notice__content__text" class="u-notice__content__text" style="width: auto;"
					:style="[animationStyle]">
					<view v-for="(item, index) in tempList" :key="index" class="itemBox">
						<view class="item" @click="handleClick(item)">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import props from './props.js';
	// #ifdef APP-NVUE
	const animation = uni.requireNativePlugin('animation')
	const dom = uni.requireNativePlugin('dom')
	// #endif
	/**
	 * RowNotice 滚动通知中的水平滚动模式
	 * @description 水平滚动
	 * @tutorial https://www.uviewui.com/components/noticeBar.html
	 * @property {String | Number}	text			显示的内容，字符串
	 * @property {String}			icon			是否显示左侧的音量图标 (默认 'volume' )
	 * @property {String}			mode			通告模式，link-显示右箭头，closable-显示右侧关闭图标
	 * @property {String}			color			文字颜色，各图标也会使用文字颜色 (默认 '#f9ae3d' )
	 * @property {String}			bgColor			背景颜色 (默认 ''#fdf6ec' )
	 * @property {String | Number}	fontSize		字体大小，单位px (默认 14 )
	 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度  (默认 80 )
	 * 
	 * @event {Function} click 点击通告文字触发
	 * @event {Function} close 点击右侧关闭图标触发
	 * @example 
	 */
	export default {
		name: 'u-row-notice2',
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		data() {
			return {
				animationDuration: '0', // 动画执行时间
				animationPlayState: 'paused', // 动画的开始和结束执行
				// nvue下，内容发生变化，导致滚动宽度也变化，需要标志为是否需要重新计算宽度
				// 不能在内容变化时直接重新计算，因为nvue的animation模块上一次的滚动不是刚好结束，会有影响
				nvueInit: true,
				show: true
			};
		},
		watch: {
			text: {
				immediate: true,
				handler(newValue, oldValue) {
					// #ifdef APP-NVUE
					this.nvueInit = true
					// #endif
					// #ifndef APP-NVUE
					this.vue()
					// #endif

					if (!uni.$u.test.string(newValue)) {
						uni.$u.error('noticebar组件direction为row时，要求text参数为字符串形式')
					}
				}
			},
			fontSize() {
				// #ifdef APP-NVUE
				this.nvueInit = true
				// #endif
				// #ifndef APP-NVUE
				this.vue()
				// #endif
			},
			speed() {
				// #ifdef APP-NVUE
				this.nvueInit = true
				// #endif
				// #ifndef APP-NVUE
				this.vue()
				// #endif
			}
		},
		computed: {
			// 文字内容的样式
			textStyle() {
				let style = {}
				style.color = this.color
				style.fontSize = uni.$u.addUnit(this.fontSize)
				return style
			},
			animationStyle() {
				let style = {}
				style.animationDuration = this.animationDuration
				style.animationPlayState = this.animationPlayState
				return style
			},
			// 内部对用户传入的数据进一步分割，放到多个text标签循环，否则如果用户传入的字符串很长（100个字符以上）
			// 放在一个text标签中进行滚动，在低端安卓机上，动画可能会出现抖动现象，需要分割到多个text中可解决此问题
			innerText() {
				let result = [],
					// 每组text标签的字符长度
					len = 20
				const textArr = this.text.split('')
				for (let i = 0; i < textArr.length; i += len) {
					// 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
					result.push(textArr.slice(i, i + len).join(''))
				}
				return result
			}
		},
		mounted() {
			// #ifdef APP-PLUS
			// 在APP上(含nvue)，监听当前webview是否处于隐藏状态(进入下一页时即为hide状态)
			// 如果webivew隐藏了，为了节省性能的损耗，应停止动画的执行，同时也是为了保持进入下一页返回后，滚动位置保持不变
			var pages = getCurrentPages()
			var page = pages[pages.length - 1]
			var currentWebview = page.$getAppWebview()
			currentWebview.addEventListener('hide', () => {
				this.webviewHide = true
			})
			currentWebview.addEventListener('show', () => {
				this.webviewHide = false
			})
			// #endif

			this.init()
		},
		methods: {
			handleClick(item) {
				this.$emit('teplateItemClicked', item.text)
			},

			init() {
				// #ifdef APP-NVUE
				this.nvue()
				// #endif

				// #ifndef APP-NVUE
				this.vue()
				// #endif

				if (!uni.$u.test.string(this.text)) {
					uni.$u.error('noticebar组件direction为row时，要求text参数为字符串形式')
				}
			},
			// vue版处理
			async vue() {
				// #ifndef APP-NVUE
				let boxWidth = 0,
					textWidth = 0
				// 进行一定的延时
				await uni.$u.sleep()
				// 查询盒子和文字的宽度
				textWidth = (await this.$uGetRect('.u-notice__content__text')).width
				boxWidth = (await this.$uGetRect('.u-notice__content')).width
				// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
				// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
				this.animationDuration = `${textWidth / uni.$u.getPx(this.speed)}s`
				// 这里必须这样开始动画，否则在APP上动画速度不会改变
				this.animationPlayState = 'paused'
				setTimeout(() => {
					this.animationPlayState = 'running'
				}, 10)
				// #endif
			},
			// nvue版处理
			async nvue() {
				// #ifdef APP-NVUE
				this.nvueInit = false
				let boxWidth = 0,
					textWidth = 0
				// 进行一定的延时
				await uni.$u.sleep()
				// 查询盒子和文字的宽度
				textWidth = (await this.getNvueRect('u-notice__content__text')).width
				boxWidth = (await this.getNvueRect('u-notice__content')).width
				// 将文字移动到盒子的右边沿，之所以需要这么做，是因为nvue不支持100%单位，否则可以通过css设置
				animation.transition(this.$refs['u-notice__content__text'], {
					styles: {
						transform: `translateX(${boxWidth}px)`
					},
				}, () => {
					// 如果非禁止动画，则开始滚动
					!this.stopAnimation && this.loopAnimation(textWidth, boxWidth)
				});
				// #endif
			},
			loopAnimation(textWidth, boxWidth) {
				// #ifdef APP-NVUE
				animation.transition(this.$refs['u-notice__content__text'], {
					styles: {
						// 目标移动终点为-textWidth，也即当文字的最右边贴到盒子的左边框的位置
						transform: `translateX(-${textWidth}px)`
					},
					// 滚动时间的计算为，时间 = 路程(boxWidth + textWidth) / 速度，最后转为毫秒
					duration: (boxWidth + textWidth) / uni.$u.getPx(this.speed) * 1000,
					delay: 10
				}, () => {
					animation.transition(this.$refs['u-notice__content__text'], {
						styles: {
							// 重新将文字移动到盒子的右边沿
							transform: `translateX(${this.stopAnimation ? 0 : boxWidth}px)`
						},
					}, () => {
						// 如果非禁止动画，则继续下一轮滚动
						if (!this.stopAnimation) {
							// 判断是否需要初始化计算尺寸
							if (this.nvueInit) {
								this.nvue()
							} else {
								this.loopAnimation(textWidth, boxWidth)
							}
						}
					});
				})
				// #endif
			},
			getNvueRect(el) {
				// #ifdef APP-NVUE
				// 返回一个promise
				return new Promise(resolve => {
					dom.getComponentRect(this.$refs[el], (res) => {
						resolve(res.size)
					})
				})
				// #endif
			},
			// 点击通告栏
			clickHandler(index) {
				this.$emit('click')
			},
			// 点击右侧按钮，需要判断点击的是关闭图标还是箭头图标
			close() {
				this.$emit('close')
			}
		},
		// #ifdef APP-NVUE
		beforeDestroy() {
			this.stopAnimation = true
		},
		// #endif
	};
</script>

<style lang="scss" scoped>
	@import "../../node_modules/uview-ui/libs/css/components.scss";
	@import "./index.scss";
</style>