384 lines
8.4 KiB
Vue
384 lines
8.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="text-marquee" :style="rootStyle">
|
|||
|
|
<!-- 测量节点须留在组件布局树内；fixed + 移出视区在部分小程序上宽度为 0，导致永不跑马灯 -->
|
|||
|
|
<view class="text-marquee__measure">
|
|||
|
|
<text :id="measureId" class="text-marquee__measure-text" :style="textStyle">{{ text || '' }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view :id="boxId" class="text-marquee__box">
|
|||
|
|
<view v-if="measured && !isOverflow" class="text-marquee__static">
|
|||
|
|
<text :style="textStyle">{{ text || '' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-else-if="measured && isOverflow" class="text-marquee__scroll">
|
|||
|
|
<view class="text-marquee__track" :style="marqueeTransformStyle">
|
|||
|
|
<text class="text-marquee__seg" :style="textStyle">{{ text }}</text>
|
|||
|
|
<view class="text-marquee__gap" :style="{ width: gapRpx + 'rpx' }" />
|
|||
|
|
<text class="text-marquee__seg" :style="textStyle">{{ text }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="text-marquee__static">
|
|||
|
|
<text :style="textStyle">{{ text || '' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function raf(fn) {
|
|||
|
|
if (typeof requestAnimationFrame === 'function') {
|
|||
|
|
return requestAnimationFrame(fn)
|
|||
|
|
}
|
|||
|
|
return setTimeout(fn, 16)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function caf(id) {
|
|||
|
|
if (id == null) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
clearTimeout(id)
|
|||
|
|
if (typeof cancelAnimationFrame === 'function') {
|
|||
|
|
cancelAnimationFrame(id)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'text-marquee',
|
|||
|
|
props: {
|
|||
|
|
text: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
width: {
|
|||
|
|
type: String,
|
|||
|
|
default: '100%'
|
|||
|
|
},
|
|||
|
|
speed: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 40
|
|||
|
|
},
|
|||
|
|
gap: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 32
|
|||
|
|
},
|
|||
|
|
fontSize: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 28
|
|||
|
|
},
|
|||
|
|
color: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#333333'
|
|||
|
|
},
|
|||
|
|
fontWeight: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 'normal'
|
|||
|
|
},
|
|||
|
|
/** 测量防抖（ms），减轻父页面频繁 setData 导致的反复测量 */
|
|||
|
|
measureDebounce: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 200
|
|||
|
|
},
|
|||
|
|
/** 溢出滞回：进入需 tw > bw + margin，退出需 tw < bw - margin，避免临界抖动 */
|
|||
|
|
overflowMargin: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 4
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
uid: `m_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`,
|
|||
|
|
measured: false,
|
|||
|
|
isOverflow: false,
|
|||
|
|
textWidthPx: 0,
|
|||
|
|
marqueeOffsetPx: 0,
|
|||
|
|
_periodPx: 0,
|
|||
|
|
_rAF: null,
|
|||
|
|
_lastTs: 0,
|
|||
|
|
_measureTimer: null,
|
|||
|
|
_resizeTimer: null,
|
|||
|
|
/** 每次发起测量自增，exec 回调只对最后一次测量生效，避免多次点击/切换时异步结果乱序覆盖 */
|
|||
|
|
_measureSeq: 0,
|
|||
|
|
/** 每次停止跑马灯自增，旧 rAF 回调读到后不继续调度，避免多循环抢 _lastTs 导致 dt 为负、左右狂抖 */
|
|||
|
|
_marqueeGen: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
gapPx() {
|
|||
|
|
if (typeof uni !== 'undefined' && typeof uni.upx2px === 'function') {
|
|||
|
|
return uni.upx2px(this.gapRpx)
|
|||
|
|
}
|
|||
|
|
return Number(this.gapRpx) || 0
|
|||
|
|
},
|
|||
|
|
measureId() {
|
|||
|
|
return `mm_${this.uid}`
|
|||
|
|
},
|
|||
|
|
boxId() {
|
|||
|
|
return `mb_${this.uid}`
|
|||
|
|
},
|
|||
|
|
gapRpx() {
|
|||
|
|
return this.gap
|
|||
|
|
},
|
|||
|
|
rootStyle() {
|
|||
|
|
return {
|
|||
|
|
width: this.width
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fontSizeWithUnit() {
|
|||
|
|
const fs = this.fontSize
|
|||
|
|
return typeof fs === 'number' ? `${fs}rpx` : fs
|
|||
|
|
},
|
|||
|
|
textStyle() {
|
|||
|
|
return {
|
|||
|
|
fontSize: this.fontSizeWithUnit,
|
|||
|
|
color: this.color,
|
|||
|
|
fontWeight: this.fontWeight
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
marqueeTransformStyle() {
|
|||
|
|
if (!this.isOverflow) {
|
|||
|
|
return {}
|
|||
|
|
}
|
|||
|
|
const x = Math.round(this.marqueeOffsetPx * 100) / 100
|
|||
|
|
return {
|
|||
|
|
transform: `translate3d(${x}px, 0, 0)`,
|
|||
|
|
willChange: 'transform'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
text() {
|
|||
|
|
this.scheduleRemeasure()
|
|||
|
|
},
|
|||
|
|
width() {
|
|||
|
|
this.scheduleRemeasure()
|
|||
|
|
},
|
|||
|
|
fontSize() {
|
|||
|
|
this.scheduleRemeasure()
|
|||
|
|
},
|
|||
|
|
gap() {
|
|||
|
|
this.scheduleRemeasure()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.runRemeasure()
|
|||
|
|
// 父级 flex/百分比宽在首帧可能未就绪，延迟再测（尤其微信小程序）
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
setTimeout(() => this.runRemeasure(), 50)
|
|||
|
|
setTimeout(() => this.runRemeasure(), 280)
|
|||
|
|
})
|
|||
|
|
if (typeof uni !== 'undefined' && uni.onWindowResize) {
|
|||
|
|
this._resizeHandler = () => {
|
|||
|
|
clearTimeout(this._resizeTimer)
|
|||
|
|
this._resizeTimer = setTimeout(() => {
|
|||
|
|
this._resizeTimer = null
|
|||
|
|
this.runRemeasure()
|
|||
|
|
}, 280)
|
|||
|
|
}
|
|||
|
|
uni.onWindowResize(this._resizeHandler)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
this.stopMarquee()
|
|||
|
|
clearTimeout(this._measureTimer)
|
|||
|
|
clearTimeout(this._resizeTimer)
|
|||
|
|
if (this._resizeHandler && typeof uni !== 'undefined' && uni.offWindowResize) {
|
|||
|
|
uni.offWindowResize(this._resizeHandler)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
scheduleRemeasure() {
|
|||
|
|
const ms = Math.max(0, Number(this.measureDebounce) || 0)
|
|||
|
|
clearTimeout(this._measureTimer)
|
|||
|
|
if (ms <= 0) {
|
|||
|
|
this.runRemeasure()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this._measureTimer = setTimeout(() => {
|
|||
|
|
this._measureTimer = null
|
|||
|
|
this.runRemeasure()
|
|||
|
|
}, ms)
|
|||
|
|
},
|
|||
|
|
runRemeasure() {
|
|||
|
|
const seq = ++this._measureSeq
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
if (seq !== this._measureSeq) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const q = uni.createSelectorQuery().in(this)
|
|||
|
|
q.select(`#${this.measureId}`).boundingClientRect()
|
|||
|
|
q.select(`#${this.boxId}`).boundingClientRect()
|
|||
|
|
q.exec((res) => {
|
|||
|
|
if (seq !== this._measureSeq) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const tr = res && res[0]
|
|||
|
|
const br = res && res[1]
|
|||
|
|
if (!tr || !br || typeof tr.width !== 'number' || typeof br.width !== 'number') {
|
|||
|
|
this.applyOverflowDecision(false, 0)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const tw = tr.width
|
|||
|
|
const bw = br.width
|
|||
|
|
this.textWidthPx = tw
|
|||
|
|
const m = Math.max(0, Number(this.overflowMargin) || 0)
|
|||
|
|
let nextOverflow
|
|||
|
|
if (!this.measured) {
|
|||
|
|
nextOverflow = tw > bw + m
|
|||
|
|
} else if (this.isOverflow) {
|
|||
|
|
nextOverflow = tw > bw - m
|
|||
|
|
} else {
|
|||
|
|
nextOverflow = tw > bw + m
|
|||
|
|
}
|
|||
|
|
const period = tw + this.gapPx
|
|||
|
|
this.applyOverflowDecision(nextOverflow, period)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
applyOverflowDecision(nextOverflow, period) {
|
|||
|
|
const wasOverflow = this.isOverflow
|
|||
|
|
this.isOverflow = nextOverflow
|
|||
|
|
this.measured = true
|
|||
|
|
|
|||
|
|
if (!nextOverflow) {
|
|||
|
|
this.stopMarquee()
|
|||
|
|
this.marqueeOffsetPx = 0
|
|||
|
|
this._periodPx = 0
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const periodChanged =
|
|||
|
|
this._periodPx <= 0 || Math.abs(this._periodPx - period) > 0.75
|
|||
|
|
this._periodPx = period
|
|||
|
|
|
|||
|
|
if (!wasOverflow && nextOverflow) {
|
|||
|
|
this.marqueeOffsetPx = 0
|
|||
|
|
this.$nextTick(() => this.startMarquee(period))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (wasOverflow && nextOverflow && periodChanged) {
|
|||
|
|
this.marqueeOffsetPx = 0
|
|||
|
|
this.stopMarquee()
|
|||
|
|
this.$nextTick(() => this.startMarquee(period))
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (wasOverflow && nextOverflow && !this._rAF) {
|
|||
|
|
this.$nextTick(() => this.startMarquee(period))
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
stopMarquee() {
|
|||
|
|
this._marqueeGen++
|
|||
|
|
if (this._rAF != null) {
|
|||
|
|
caf(this._rAF)
|
|||
|
|
this._rAF = null
|
|||
|
|
}
|
|||
|
|
this._lastTs = 0
|
|||
|
|
},
|
|||
|
|
startMarquee(periodPx) {
|
|||
|
|
this.stopMarquee()
|
|||
|
|
if (!this.isOverflow || periodPx <= 0) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const myGen = this._marqueeGen
|
|||
|
|
const speed = Math.max(1, Number(this.speed) || 40)
|
|||
|
|
const loop = (ts) => {
|
|||
|
|
if (myGen !== this._marqueeGen) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.isOverflow || this._periodPx <= 0) {
|
|||
|
|
this._rAF = null
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this._lastTs) {
|
|||
|
|
this._lastTs = ts
|
|||
|
|
}
|
|||
|
|
let dt = ts - this._lastTs
|
|||
|
|
this._lastTs = ts
|
|||
|
|
if (dt < 0) {
|
|||
|
|
dt = 0
|
|||
|
|
}
|
|||
|
|
if (dt > 80) {
|
|||
|
|
dt = 80
|
|||
|
|
}
|
|||
|
|
let next = this.marqueeOffsetPx - (speed * dt) / 1000
|
|||
|
|
const p = this._periodPx
|
|||
|
|
while (next <= -p) {
|
|||
|
|
next += p
|
|||
|
|
}
|
|||
|
|
this.marqueeOffsetPx = next
|
|||
|
|
if (myGen !== this._marqueeGen) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this._rAF = raf(loop)
|
|||
|
|
}
|
|||
|
|
this._rAF = raf(loop)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.text-marquee {
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
min-width: 0;
|
|||
|
|
max-width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-marquee__measure {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
display: inline-block;
|
|||
|
|
width: max-content;
|
|||
|
|
max-width: none;
|
|||
|
|
height: 0;
|
|||
|
|
overflow: visible;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-marquee__measure-text {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-marquee__box {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-marquee__static {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-marquee__scroll {
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-marquee__track {
|
|||
|
|
display: inline-flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-items: center;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
backface-visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-marquee__seg {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-marquee__gap {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
height: 1px;
|
|||
|
|
}
|
|||
|
|
</style>
|