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

最新推荐文章于 2025-05-27 11:56:17 发布

原创最新推荐文章于 2025-05-27 11:56:17 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

<view class="right-left-scroll">
		<view 
			class="content" 
			:style="{'animation': `noticeAnimation ${time}s linear 1s infinite`}"
		>
			{{notice}}
		</view>
	</view>

export default {
		data() {
			return {
				notice: '空前折扣力度，专享福利大家快来抢利大家快快来抢购下dfdfdfddfdfdfd专享福利大家快来抢利大家快快来抢购下专享福利大家快来抢',
                time: 0,
			}
		},
		mounted() {
			let scroll_width = 0;
			const query = uni.createSelectorQuery().in(this);
			query.select('.right-left-scroll').boundingClientRect(data => {
				scroll_width = (data.width).toFixed(2);
			}).exec();
			
			query.select('.right-left-scroll .content').boundingClientRect(data => {
				if(data.width - scroll_width > 0) {
					this.time = (9 * data.width / scroll_width).toFixed(2);
				}
			}).exec();
		}
	}}
	}

.right-left-scroll {
		white-space: nowrap;
		overflow: hidden;
		
		.content {
			display: inline-block;
		}
	}

注意：只有在app.vue里面定义的keyframes才能在style里面使用
app.vue文件style中：

@keyframes noticeAnimation {
	from {
		transform: translateX(100rpx);
	}
	to {
		// transform: translateX(calc(-100% + 150px));
		transform: translateX(-100%);
	}
}