|
@@ -26,10 +26,12 @@
|
|
|
|
|
|
animationDuration: animationDuration,
|
|
|
animationPlayState: animationPlayState,
|
|
|
+ animationDelay:animationDelay,
|
|
|
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>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -46,7 +48,7 @@ export default {
|
|
|
props: {
|
|
|
an: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: false
|
|
|
},
|
|
|
// 滚动通知设置圆角
|
|
|
borderRadius: {
|
|
@@ -133,6 +135,7 @@ export default {
|
|
|
boxWidth: 0, // 供文字滚动的父盒子的宽度,和前者一起为了计算滚动速度
|
|
|
animationDuration: '10s', // 动画执行时间
|
|
|
animationPlayState: 'paused', // 动画的开始和结束执行
|
|
|
+ animationDelay:'1s',
|
|
|
showText: '' // 显示的文本
|
|
|
};
|
|
|
},
|
|
@@ -171,6 +174,8 @@ export default {
|
|
|
if (this.color) style.color = this.color;
|
|
|
else if(this.type == 'none') style.color = '#606266';
|
|
|
style.fontSize = this.fontSize + 'rpx';
|
|
|
+
|
|
|
+
|
|
|
return style;
|
|
|
},
|
|
|
// 计算背景颜色
|
|
@@ -203,12 +208,22 @@ export default {
|
|
|
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`;
|
|
|
- // 这里必须这样开始动画,否则在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() {
|
|
|
this.$emit('getMore');
|
|
|
},getAnimationend(){
|
|
|
- console.log(this.playState)
|
|
|
+ //console.log(this.playState)
|
|
|
this.$emit('getAnimationend');
|
|
|
}
|
|
|
}
|
|
@@ -266,10 +281,12 @@ export default {
|
|
|
}
|
|
|
|
|
|
.u-notice-content {
|
|
|
- animation:u-loop-animation 10s linear both;
|
|
|
+ animation:u-loop-animation 15s linear both;
|
|
|
text-align: right;
|
|
|
+
|
|
|
// 这一句很重要,为了能让滚动左右连接起来
|
|
|
- padding-left: 100%;
|
|
|
+ // padding-left: -20%;
|
|
|
+ //padding-right: 30%;
|
|
|
display: flex;
|
|
|
flex-wrap: nowrap;
|
|
|
}
|
|
@@ -286,7 +303,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
- transform: translate3d(-100%, 0, 0);
|
|
|
+ transform: translate3d(-80%, 0, 0);
|
|
|
}
|
|
|
}
|
|
|
</style>
|