zhengkaixin 1 year ago
parent
commit
7d9c31d5c8

+ 17 - 11
components/u-column-notice/u-column-notice.vue

@@ -36,7 +36,7 @@
 						:fontSize="fontSize"
 						:fontSize="fontSize"
 						:speed="speed"
 						:speed="speed"
 						:playState="current2==index?'play':'playState'"
 						:playState="current2==index?'play':'playState'"
-						:an="an"
+						:an="current2==index"
 						:padding="padding"
 						:padding="padding"
 						@getMore="getMore"
 						@getMore="getMore"
 						@close="close"
 						@close="close"
@@ -194,18 +194,23 @@ export default {
 			
 			
 			if(index==this.current2){
 			if(index==this.current2){
 				
 				
-				console.log("getAnimationend")
-				var c=this.current2+1;
-				if(c==this.list.length){
-					this.current2=0
-				}else{
-					this.current2=c
-				}
+				
 				//this.$forceUpdate()
 				//this.$forceUpdate()
-				this.an=false,
+				this.an=false
 				setTimeout(()=>{
 				setTimeout(()=>{
-					this.an=true
-				},10)
+					console.log("getAnimationend",this.current2)
+					var c=this.current2+1;
+					if(c==this.list.length){
+						this.current2=0
+					}else{
+						this.current2=c
+					}
+					
+					setTimeout(()=>{
+						this.an=true
+						
+					},1000)
+				},50)
 				
 				
 				console.log(this.current2)
 				console.log(this.current2)
 			}
 			}
@@ -264,6 +269,7 @@ export default {
 }
 }
 
 
 .u-news-item {
 .u-news-item {
+	width: 100%;
 	overflow: hidden;
 	overflow: hidden;
 }
 }
 
 

+ 1 - 9
components/u-notice-bar/u-notice-bar.vue

@@ -237,15 +237,7 @@ export default {
 	align-items: center;
 	align-items: center;
 }
 }
 
 
-.u-notice-content {
-	line-height: 1;
-	white-space: nowrap;
-	font-size: 26rpx;
-	animation: u-loop-animation 10s linear infinite both;
-	text-align: right;
-	// 这一句很重要,为了能让滚动左右连接起来
-	padding-left: 100%;
-}
+ 
 
 
 @keyframes u-loop-animation {
 @keyframes u-loop-animation {
 	0% {
 	0% {

+ 29 - 12
components/u-row-notice/u-row-notice.vue

@@ -26,10 +26,12 @@
 						 
 						 
 						animationDuration: animationDuration,
 						animationDuration: animationDuration,
 						animationPlayState: animationPlayState,
 						animationPlayState: animationPlayState,
+						animationDelay:animationDelay,
 						animationIterationCount:1,
 						animationIterationCount:1,
+						
 					}"
 					}"
 				>
 				>
-					<text class="u-notice-text" @tap="click" :style="[textStyle]"
+					<text class="u-notice-text" @tap="click" :style="' font-size: 14px;color: '+(true?'rgb(255, 61, 0);':'#fff')"
 					:class="['u-type-' + type]">{{showText}}</text>
 					:class="['u-type-' + type]">{{showText}}</text>
 				</view>
 				</view>
 			</view>
 			</view>
@@ -46,7 +48,7 @@ export default {
 	props: {
 	props: {
 		an: {
 		an: {
 			type: Boolean,
 			type: Boolean,
-			default: true
+			default: false
 		},
 		},
 		// 滚动通知设置圆角
 		// 滚动通知设置圆角
 		borderRadius: {
 		borderRadius: {
@@ -133,6 +135,7 @@ export default {
 			boxWidth: 0, // 供文字滚动的父盒子的宽度,和前者一起为了计算滚动速度
 			boxWidth: 0, // 供文字滚动的父盒子的宽度,和前者一起为了计算滚动速度
 			animationDuration: '10s', // 动画执行时间
 			animationDuration: '10s', // 动画执行时间
 			animationPlayState: 'paused', // 动画的开始和结束执行
 			animationPlayState: 'paused', // 动画的开始和结束执行
+			animationDelay:'1s',
 			showText: '' // 显示的文本
 			showText: '' // 显示的文本
 		};
 		};
 	},
 	},
@@ -171,6 +174,8 @@ export default {
 			if (this.color) style.color = this.color;
 			if (this.color) style.color = this.color;
 			else if(this.type == 'none') style.color = '#606266';
 			else if(this.type == 'none') style.color = '#606266';
 			style.fontSize = this.fontSize + 'rpx';
 			style.fontSize = this.fontSize + 'rpx';
+			
+			 
 			return style;
 			return style;
 		},
 		},
 		// 计算背景颜色
 		// 计算背景颜色
@@ -203,12 +208,22 @@ export default {
 			Promise.all(query).then(() => {
 			Promise.all(query).then(() => {
 				// 根据t=s/v(时间=路程/速度),这里为何不需要加上#u-notice-box的宽度,因为中设置了.u-notice-content样式中设置了padding-left: 100%
 				// 根据t=s/v(时间=路程/速度),这里为何不需要加上#u-notice-box的宽度,因为中设置了.u-notice-content样式中设置了padding-left: 100%
 				// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
 				// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
-				this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`;
-				// 这里必须这样开始动画,否则在APP上动画速度不会改变(HX版本2.4.6,IOS13)
-				this.animationPlayState = 'paused';
-				setTimeout(() => {
-					if(this.playState == 'play' && this.autoplay) this.animationPlayState = 'running';
-				}, 10);
+				this.animationDuration = `${(this.textWidth / uni.upx2px(this.speed))}s`;
+				//console.log(this.animationDuration+"animationDuration"+this.textWidth)
+				if(this.textWidth / uni.upx2px(this.speed)>3){
+					// 这里必须这样开始动画,否则在APP上动画速度不会改变(HX版本2.4.6,IOS13)
+					this.animationPlayState = 'paused';
+					setTimeout(() => {
+						if(this.playState == 'play' && this.autoplay) this.animationPlayState = 'running';
+					}, 10);
+					
+				}else{
+					this.animationPlayState = 'paused';
+					setTimeout(()=>{
+						this.getAnimationend()
+					},3000)
+				}
+				
 			});
 			});
 		},
 		},
 		// 点击通告栏
 		// 点击通告栏
@@ -223,7 +238,7 @@ export default {
 		getMore() {
 		getMore() {
 			this.$emit('getMore');
 			this.$emit('getMore');
 		},getAnimationend(){
 		},getAnimationend(){
-			console.log(this.playState)
+			//console.log(this.playState)
 			this.$emit('getAnimationend');
 			this.$emit('getAnimationend');
 		}
 		}
 	}
 	}
@@ -266,10 +281,12 @@ export default {
 }
 }
 
 
 .u-notice-content {
 .u-notice-content {
-	animation:u-loop-animation 10s linear  both;
+	animation:u-loop-animation 15s linear  both;
 	text-align: right;
 	text-align: right;
+	 
 	// 这一句很重要,为了能让滚动左右连接起来
 	// 这一句很重要,为了能让滚动左右连接起来
-	padding-left: 100%;
+	// padding-left: -20%;
+	 //padding-right: 30%;
 	display: flex;
 	display: flex;
 	flex-wrap: nowrap;
 	flex-wrap: nowrap;
 }
 }
@@ -286,7 +303,7 @@ export default {
 	}
 	}
 
 
 	100% {
 	100% {
-		transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-80%, 0, 0);
 	}
 	}
 }
 }
 </style>
 </style>