uniapp 文字无缝从右到左滚动

最新推荐文章于 2025-02-27 14:16:00 发布

原创

最新推荐文章于 2025-02-27 14:16:00 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个uniapp插件ay-goLeft_r，用于实现文字无缝从右到左滚动的效果。插件通过swiper组件实现，具备自定义内容、展示宽度、字体大小等属性，并提供了设置自动切换时间和动画时长的功能。在组件创建和更新时，会根据输入的文字调整显示列表，确保滚动的平滑。在实际应用中，可以通过引入插件并配置参数来实现在uniapp项目中的文字无缝左滚效果。

uniapp 文字无缝从右到左滚动

欢迎使用ay-goLeft_r插件（正研究优化中）

最近有需求为：文字无缝左滚，整理插件代码如下：

1.ay-goLeft_r插件

可去uniapp插件市场的操作组件：文字无缝左滚，自定义任意内容插件页面下载.

属性

属性	类型	说明
str_show	String	需要显示的文本
str_show_num	Number	展示空间可以显示的字数
width	Number	展示空间的宽度，单位px

下面是插件的 代码片.

<template>
	<view class="_notice" :style="style_box">
		
		<swiper v-for="(item,index) in list" :key="index" class="tc" :style="swiperHeight" @change="slideChange" :indicator-dots="false" :autoplay="true"
			:interval="interval"  :circular="true" display-multiple-items="1" :duration="duration" :acceleration="true">
			
			<swiper-item v-for="(item2,index2) in item.list" :key="index2">
				
				<view  class="swiper-item-a" :class="index==0?'swiper-item-l':'swiper-item-r'">{
   
   {
   
   item2}}</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
   
   
		props: {
   
   
			//显示数据
			str_show: {
   
   
				type: String,
				default: '',
			},
			str_show_num: {
   
   
				type: Number,
				default: 8,
			},
			
			paddingLR: {
   
   
				type: Number,
				default: 10,
			},
			paddingTB: {
   
   
				type: Number,
				default: 0,
			},
			letterSpacing: {
   
   
				type: Number,
				default: 0,
			},
			height: {
   
   
				type: Number,
				default: 22,
			},
			width: {
   
   
				type: Number,
				default: 100<