增加other分包页面
我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）
This commit is contained in:
301
tuniao-ui/components/tn-row-notice/tn-row-notice.vue
Normal file
301
tuniao-ui/components/tn-row-notice/tn-row-notice.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user