uni-app实现公告文本超出从右向左循环滚动

╰半橙微兮° 2023-02-11 08:57 31阅读 0赞

用的是css3的动画效果，也可以用定时器或者uni.createAnimation来实现，但是这两种方法都比较容易造成卡死。

html代码

<view class="notice-content">
    	<image src="https://hd-gw.oss-cn-shenzhen.aliyuncs.com/app/miniWechat/0520-notice.png" mode=""></image>
    	公告：<view class="text-wrap"><view :style="{animation: `noticeAnimation ${time}s linear 1s infinite`}" id="notice">{
       {notice}}</view>
    </view>

js代码

const query = uni.createSelectorQuery().in(this);
    query.select('#notice').boundingClientRect(data => {
    	if(data.width - 264>0){   //计算文本长度
    		this.time = (5*data.width/264).toFixed(2)  //动画过渡时间
    	}
    }).exec();

css代码

@keyframes noticeAnimation{
    	 from{transform: translateX(0)}
    	 to{transform: translateX(calc(-100% + 150px))}
    }
    
    .notice-content {
    	width: 683upx;
    	height: 54upx;
    	border-radius: 13upx;
    	background-color: #CBCBCB;
    	margin-top: 24upx;
    	padding: 0 8upx;
    	opacity: 0.63;
    	display: flex;
    	align-items: center;
    
    	.text-wrap,#notice {
    		font-size: 28upx;
    		opacity: 0.8;
    		white-space: nowrap;
    	}	
    	
    	.text-wrap{
    		width: 528upx;
    		overflow: hidden;
    	}
    	
    	#notice{
    		display: inline-block;
    	}
    
    	image {
    		width: 36upx;
    		height: 36upx;
    		margin-right: 17upx;
    		opacity: 0.8;
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，31人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app实现公告文本超出从右向左循环滚动

用的是css3的动画效果，也可以用定时器或者uni.createAnimation来实现，但是这两种方法都比较容易造成卡死。 html代码 <view class=

╰半橙微兮°/ 2023年02月11日 08:57/ 0 赞/ 32 阅读

相关 vue项目中实现公告向左移动，鼠标悬停静止

在vue项目中如何实现消息公告逐渐向左移动效果。 -------------------- 代码如下（示例）： var demo = document.getEl

分手后的思念是犯贱/ 2022年12月08日 05:13/ 0 赞/ 157 阅读

相关 css实现div从左到右出现,css横向排列_css div 实现图片从左向右自动横向排列

摘要腾兴网为您分享:css div 实现图片从左向右自动横向排列，追书神器，中英翻译，优酷，武魂传说等软件知识，以及宝app，安卓串口，爱奇艺看图软件，爆枪英雄好号送，手机短

落日映苍穹つ/ 2022年09月02日 14:54/ 0 赞/ 196 阅读

相关 vue+elementUi——实现竖向公告滚动效果(功能实现)

最近在做电商前台页面，首屏右下角有个公告，需要实现`竖向滚动`效果。也就是个竖向的轮播。 ![在这里插入图片描述][bfba9890aa309c7427d237458aea

浅浅的花香味﹌/ 2022年08月31日 02:23/ 0 赞/ 1311 阅读

相关公告循环向上滚动

html: <div class="scroll-wrap" style="height: 16px; overflow: hidden;">

超、凢脫俗/ 2022年07月28日 11:48/ 0 赞/ 173 阅读

相关 float: right从右向左排序

问题当多个div一起向右浮动时，最终排列顺序不是按照HTML上的顺序，而是反向的。div1先向右浮动时，到达最右，占据空间后，div2只能占据其后的位置。最终看上去的效

矫情吗；*/ 2022年06月13日 14:45/ 0 赞/ 243 阅读

相关架构师向左,项目经理向右??

最近开始了新一轮的换工作历程,投简历也集中在了架构师和项目经理这两个角色中,当然,架构师很多时候跟项目经理,team leader,高级软件工程师是重合的,当然,我指

墨蓝/ 2022年06月13日 07:29/ 0 赞/ 176 阅读

相关内容审核向左，还是向右？

欢迎访问[网易云社区][Link 1]，了解更多网易技术产品运营经验。最近，各家新闻资讯App和直播平台都开始对内容审核人员的招聘情有独钟。早

叁歲伎倆/ 2022年04月15日 00:57/ 0 赞/ 188 阅读

相关 KubeEdge向左，K3S向右

KubeEdge是华为捐献给CNCF的第一个开源项目，也是全球首个基于Kubernetes扩展的，提供云边协同能力的开放式边缘计算平台。KubeEdge的名字来源于Kube +

分手后的思念是犯贱/ 2022年02月22日 04:18/ 0 赞/ 408 阅读

相关 C语言实现从左向右字幕滚动的效果

include <stdio.h> include <string.h> include <windows.h> int main() { char str[100]

古城微笑少年丶/ 2021年10月24日 07:00/ 0 赞/ 431 阅读