302 lines
7.4 KiB
Vue
302 lines
7.4 KiB
Vue
<template>
|
||
<view
|
||
v-if="show"
|
||
class="tn-row-notice-class tn-row-notice"
|
||
:class="[backgroundColorClass]"
|
||
:style="[noticeStyle]"
|
||
>
|
||
<view class="tn-row-notice__wrap">
|
||
<!-- 左图标 -->
|
||
<view class="tn-row-notice__icon">
|
||
<view
|
||
v-if="leftIcon"
|
||
class="tn-row-notice__icon--left"
|
||
:class="[`tn-icon-${leftIconName}`,fontColorClass]"
|
||
:style="[fontStyle('leftIcon')]"
|
||
@tap="clickLeftIcon"></view>
|
||
</view>
|
||
|
||
<!-- 消息体 -->
|
||
<view class="tn-row-notice__content-box" id="tn-row-notice__content-box">
|
||
<view
|
||
class="tn-row-notice__content"
|
||
id="tn-row-notice__content"
|
||
:style="{
|
||
animationDuration: animationDuration,
|
||
animationPlayState: animationPlayState
|
||
}"
|
||
>
|
||
<text
|
||
class="tn-row-notice__content--text"
|
||
:class="[fontColorClass]"
|
||
:style="[fontStyle()]"
|
||
@tap="click"
|
||
>{{ showText }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 右图标 -->
|
||
<view class="tn-row-notice__icon">
|
||
<view
|
||
v-if="rightIcon"
|
||
class="tn-row-notice__icon--right"
|
||
:class="[`tn-icon-${rightIconName}`,fontColorClass]"
|
||
:style="[fontStyle('rightIcon')]"
|
||
@tap="clickRightIcon"></view>
|
||
<view
|
||
v-if="closeBtn"
|
||
class="tn-row-notice__icon--right"
|
||
:class="[`tn-icon-close`,fontColorClass]"
|
||
:style="[fontStyle('close')]"
|
||
@tap="close"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||
export default {
|
||
name: 'tn-row-notice',
|
||
mixins: [componentsColorMixin],
|
||
props: {
|
||
// 显示的内容
|
||
list: {
|
||
type: Array,
|
||
default() {
|
||
return []
|
||
}
|
||
},
|
||
// 是否显示
|
||
show: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 播放状态
|
||
// play -> 播放 paused -> 暂停
|
||
playStatus: {
|
||
type: String,
|
||
default: 'play'
|
||
},
|
||
// 是否显示左边图标
|
||
leftIcon: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 左边图标的名称
|
||
leftIconName: {
|
||
type: String,
|
||
default: 'sound'
|
||
},
|
||
// 左边图标的大小
|
||
leftIconSize: {
|
||
type: Number,
|
||
default: 34
|
||
},
|
||
// 是否显示右边的图标
|
||
rightIcon: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 右边图标的名称
|
||
rightIconName: {
|
||
type: String,
|
||
default: 'right'
|
||
},
|
||
// 右边图标的大小
|
||
rightIconSize: {
|
||
type: Number,
|
||
default: 26
|
||
},
|
||
// 是否显示关闭按钮
|
||
closeBtn: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 圆角
|
||
radius: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 内边距
|
||
padding: {
|
||
type: String,
|
||
default: '18rpx 24rpx'
|
||
},
|
||
// 自动播放
|
||
autoplay: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 水平滚动时的速度，即每秒滚动多少rpx
|
||
speed: {
|
||
type: Number,
|
||
default: 160
|
||
}
|
||
},
|
||
computed: {
|
||
fontStyle() {
|
||
return (type) => {
|
||
let style = {}
|
||
style.color = this.fontColorStyle ? this.fontColorStyle : ''
|
||
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
|
||
if (type === 'leftIcon' && this.leftIconSize) {
|
||
style.fontSize = this.leftIconSize + 'rpx'
|
||
}
|
||
if (type === 'rightIcon' && this.rightIconSize) {
|
||
style.fontSize = this.rightIconSize + 'rpx'
|
||
}
|
||
if (type === 'close') {
|
||
style.fontSize = '24rpx'
|
||
}
|
||
|
||
return style
|
||
}
|
||
},
|
||
noticeStyle() {
|
||
let style = {}
|
||
style.backgroundColor = this.backgroundColorStyle ? this.backgroundColorStyle : 'transparent'
|
||
if (this.padding) style.padding = this.padding
|
||
return style
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 滚动文字的宽度
|
||
textWidth: 0,
|
||
// 存放滚动文字的盒子的宽度
|
||
textBoxWidth: 0,
|
||
// 动画执行的时间
|
||
animationDuration: '10s',
|
||
// 动画执行状态
|
||
animationPlayState: 'paused',
|
||
// 当前显示的文本
|
||
showText: ''
|
||
}
|
||
},
|
||
watch: {
|
||
list: {
|
||
handler(value) {
|
||
this.showText = value.join('，')
|
||
this.$nextTick(() => {
|
||
this.initNotice()
|
||
})
|
||
},
|
||
immediate: true
|
||
},
|
||
playStatus(value) {
|
||
if (value === 'play') this.animationPlayState = 'running'
|
||
else this.animationPlayState = 'paused'
|
||
},
|
||
speed(value) {
|
||
this.initNotice()
|
||
}
|
||
},
|
||
methods: {
|
||
// 初始化通知栏
|
||
initNotice() {
|
||
let query = [],
|
||
textBoxWidth = 0,
|
||
textWidth = 0;
|
||
let textQuery = new Promise((resolve, reject) => {
|
||
uni.createSelectorQuery()
|
||
.in(this)
|
||
.select(`#tn-row-notice__content`)
|
||
.boundingClientRect()
|
||
.exec(ret => {
|
||
this.textWidth = ret[0].width
|
||
resolve()
|
||
})
|
||
})
|
||
query.push(textQuery)
|
||
|
||
Promise.all(query).then(() => {
|
||
// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#tn-row-notice__content-box的宽度，因为设置了.tn-row-notice__content样式中设置了padding-left: 100%
|
||
this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`
|
||
// 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
|
||
this.animationPlayState = 'paused'
|
||
setTimeout(() => {
|
||
if (this.autoplay && this.playStatus === 'play') this.animationPlayState = 'running'
|
||
}, 10)
|
||
})
|
||
},
|
||
// 点击了通知栏
|
||
click() {
|
||
this.$emit('click')
|
||
},
|
||
// 点击了关闭按钮
|
||
close() {
|
||
this.$emit('close')
|
||
},
|
||
// 点击了左边图标
|
||
clickLeftIcon() {
|
||
this.$emit('clickLeft')
|
||
},
|
||
// 点击了右边图标
|
||
clickRightIcon() {
|
||
this.$emit('clickRight')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.tn-row-notice {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
&__wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
&__content {
|
||
&-box {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
overflow: hidden;
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
text-align: right;
|
||
// 为了能滚动起来
|
||
padding-left: 100%;
|
||
animation: tn-notice-loop-animation 10s linear infinite both;
|
||
|
||
&--text {
|
||
word-break: keep-all;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
&__icon {
|
||
&--left {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
&--right {
|
||
margin-left: 12rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes tn-notice-loop-animation {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
</style>
|