uniapp实现自定义头部文字滚动字幕
如图:
HTML :
<view class="noticeBarBox" v-show="noticeBarShow">
<view class="NoticeBar">
<image class="NoticeBarImg1" src="../../static/jifen/ico_tongzhi@2x2.png"></image>
<view style="width: 624rpx;height: 34rpx;overflow: hidden;" id="marquee-box">
<view class="NoticeBarTextBox" :style="{'left':left+'rpx'}" id="marquee-text">
<text v-for="(item,index) in noticeBarList" @click="noticeBarClick(item)" v-html="item.text">{{item.text}}</text>
</view>
</view>
<image class="NoticeBarImg2" src="../../static/jifen/ico_guanbi@2x.png" @click="noticeBarClose"></image>
</view>
</view>
CSS :
.noticeBarBox{
width: 100%;
position: fixed;
left: 0;
top: 0;
.NoticeBar{
width: 100%;
height: 66rpx;
background: #FFFAD4;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16rpx 25rpx;
.NoticeBarImg1{
width: 28rpx;
height: 26rpx;
}
.NoticeBarImg2{
width: 22rpx;
height: 20rpx;
}
.NoticeBarTextBox{
// display: flex;
// align-items: center;
// min-width: 624rpx;
height: 34rpx;
font-size: 24rpx;
color: #F66803;
line-height: 34rpx;
margin-left: 10rpx;
margin-right: 18rpx;
overflow: hidden;
position: relative;
display: inline-block;
white-space: nowrap;
}
}
}
JS :
export default {
data() {
return {
// 头部滚动的内容
noticeBarList:[],
// 头部滚动
noticeBarShow : true,
// 跑马灯宽度
maxWidth : 0,
// 文字宽度
TextWidth : 0,
timerId: -1,
left: 0,
}
},
onShow() {
let _this = this
if(this.noticeBarShow==false){
this.timerId==-1
}else{
//if(_this.TextWidth>_this.maxWidth){
this.play(true)
//}
}
},
onHide() {
//this.stop()
},
mounted() { //获取节点信息,最好在mounted之后获取以确保获取到
let _this = this
let query = uni.createSelectorQuery().in(this);
query.select('#marquee-box').boundingClientRect(data => {
_this.maxWidth = data.width;
// console.log(_this.maxWidth,'父级宽度')
}).exec();
},
methods: {
// 初始化头部跑马灯
init(){
let _this = this;
let query = uni.createSelectorQuery().in(this);
this.$nextTick(()=>{
query.select('#marquee-text').boundingClientRect(data => {
_this.TextWidth = data.width
// console.log(_this.TextWidth,'text宽度')
// if(data.width>_this.maxWidth){
_this.play(true)
// }
}).exec();
})
},
//在页面显示状态时调用
play(e){
clearInterval(this.timerId)
let _this = this;
if (e || this.timerId==0) {
_this.timerId = setInterval(()=>{
// console.log(_this.maxWidth)=
if ((_this.TextWidth*2)+_this.left<0){
_this.left=_this.maxWidth*2;
}
_this.left = _this.left-1;
},10);
}
},
// //在页面隐藏状态时调用,不考虑性能的话,可以不管
// stop(){
// if (this.timerId>0) {
// clearInterval(this.timerId);
// this.timerId = 0;
// }
// },
// 点击头部滚动消息关闭按钮时
noticeBarClose(){
this.noticeBarShow = false
clearInterval(this.timerId)
},
// 点击头部滚动消息时
noticeBarClick(item){
console.log(item)
},
//获取滚动数据 根据后端接口数据自定义处理 仅供参考
getRollingShow(){
let _this = this
app.globalData.request({
url:'/emp/rollingshow'
}).then(function(res){
if(res.data.data.length<=0){
_this.noticeBarShow = false
return
}
let data = res.data.data
for (var i = 0; i < data.length; i++) {
data[i].text = data[i].title + ' : ' + data[i].desc + " ";
data[data.length-1].text = data[i].title + ' : ' + data[i].desc
}
_this.noticeBarList = data
_this.init(); // 很重要,否则拿不到文字称开的宽度
})
},
// 点击头部滚动消息关闭按钮时
noticeBarClose(){
this.noticeBarShow = false
},
}
}
后端返回数据参考: