diff --git a/pages/home/index.vue b/pages/home/index.vue index a35eb07..cb237fd 100644 --- a/pages/home/index.vue +++ b/pages/home/index.vue @@ -324,9 +324,7 @@ export default { let notice = uni.getStorageSync("miniApp-info").notice; var reg = /[\r\n]/g; notice = notice.replace(reg, ""); - that.noticList = []; - // that.noticList = notice; - that.noticList.push(notice); + that.noticList = [notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice,notice]; that.showNotic = "play"; } console.log("that.noticList", that.noticList); @@ -384,9 +382,7 @@ export default { let notice = uni.getStorageSync("miniApp-info").notice; var reg = /[\r\n]/g; notice = notice.replace(reg, ""); - that.noticList = []; - // that.noticList = notice; - that.noticList.push(notice); + that.noticList = [notice, notice]; that.showNotic = "play"; } console.log("that.noticList", that.noticList); diff --git a/uni_modules/vk-uview-ui/components/u-row-notice/u-row-notice.vue b/uni_modules/vk-uview-ui/components/u-row-notice/u-row-notice.vue index 3e53278..0aef5d8 100644 --- a/uni_modules/vk-uview-ui/components/u-row-notice/u-row-notice.vue +++ b/uni_modules/vk-uview-ui/components/u-row-notice/u-row-notice.vue @@ -118,14 +118,21 @@ export default { boxWidth: 0, // 供文字滚动的父盒子的宽度,和前者一起为了计算滚动速度 animationDuration: '10s', // 动画执行时间 animationPlayState: 'paused', // 动画的开始和结束执行 - showText: '' // 显示的文本 + showText: '', // 显示的文本 + originalText: '' // 原始文本内容(用于计算动画时间) }; }, watch: { list: { immediate: true, handler(val) { - this.showText = val.join(','); + if (val.length > 0) { + this.originalText = val.join(' '); + this.showText = this.originalText + ' ' + val[0]; + } else { + this.originalText = ''; + this.showText = ''; + } this.$nextTick(() => { this.initSize(); }); @@ -181,11 +188,24 @@ export default { resolve(); }); }); + let boxQuery = new Promise((resolve, reject) => { + uni.createSelectorQuery() + .in(this) + .select(`#u-notice-box`) + .boundingClientRect() + .exec(ret => { + this.boxWidth = ret[0].width; + resolve(); + }); + }); query.push(textQuery); + query.push(boxQuery); Promise.all(query).then(() => { - // 根据t=s/v(时间=路程/速度),这里为何不需要加上#u-notice-box的宽度,因为中设置了.u-notice-content样式中设置了padding-left: 100% - // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度 - this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`; + // 根据t=s/v(时间=路程/速度),动画时间基于原始内容宽度计算,实现无缝循环 + // 原始内容宽度 = 总宽度 - 容器宽度(padding-left: 100%) + let originalContentWidth = this.textWidth - this.boxWidth; + // 动画时间 = 原始内容宽度 / 速度 + this.animationDuration = `${originalContentWidth / uni.upx2px(this.speed)}s`; // 这里必须这样开始动画,否则在APP上动画速度不会改变(HX版本2.4.6,IOS13) this.animationPlayState = 'paused'; setTimeout(() => {