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,
			},
			fontSize: {
				type: Number,
				default: 9,
			},
			//自动切换时间间隔
			interval: {
				type: Number,
				default: 1000,
			},
			//滑动动画时长
			duration: {
				type: Number,
				default: 8000,
			},
		},
		created: function() {
			let that = this;
			that.setList(that.str_show);
		},
		watch: {
			str_show(e) {
				let that = this;
				that.setList(e);
			},
		},
		computed: {
			style_box() {
				let that = this;
				var style = '';
				let zoom = 0.86;
				let zoom_wt = 0.90;
				if (getApp().globalData.led_type == 2) {
					zoom = 1;
					zoom_wt = 1;
				}

				//zoom = 1 ;
				style += `font-size:${that.fontSize}px;`;
				style += `height:${that.height*zoom}px;`;
				if (that.width > 0) {
					style += `width:${that.width*zoom_wt}px;`;
				}
				style += `padding:${that.paddingTB}px ${that.paddingLR}px;`; //padding: 20px 10px;
				if (that.letterSpacing > 0) {
					style += `letter-spacing:${that.letterSpacing}px;`;
				}
				return style;
			},
			swiperHeight() {
				let that = this;
				var style = '';
				let zoom = 0.86;
				let zoom_wt = 0.90;
				if (getApp().globalData.led_type == 2) {
					zoom = 1;
					zoom_wt = 1;
				}
				style += `line-height:${that.height*zoom}px;`;
				style += `height:${that.height*zoom}px;`;
				if (that.width > 0) {
					style += `width:${that.width*zoom_wt/that.str_show_num}px;`;
				}
				return style;
			},
		},
		data() {
			return {
				list: [],
				// interval: 5000, //1000
				// duration: 12000,
			};
		},
		methods: {
			setList(str_show) {
				let that = this;
				let list = [];
				
				let lgt = str_show.length;
				if(lgt>0){
					let new_str_show = str_show + ' ';//看起来有间隔
					
					let str_show_num = that.str_show_num;
					
					let lgt_k = lgt+1 ;
					
					if(lgt_k >= str_show_num){
						list = that.get_list_by_str(new_str_show,str_show_num,lgt_k);
						
					}else{
						let pei = str_show_num/lgt_k ;
						let new_str_d = str_show + ' ';
						let new_str_show = '';
						for (let i = 0; i < pei; i++) {
							new_str_show += new_str_d;
						}
						let lgt_k_n = new_str_show.length ;
						list = that.get_list_by_str(new_str_show,str_show_num,lgt_k_n);
						
						
					}
					
				}
					
				
				
				that.list = list;
				console.log(list)
			},
			get_list_by_str(new_str_show,str_show_num,lgt_k){
				let list = [];
				for (let i = 0; i < str_show_num; i++) {
					
					let item_list = [] ;
					let item_str = '' ;
					let rest = lgt_k - i ;
					if(rest>=lgt_k){
						item_str = new_str_show.substr(i, lgt_k);
					}else{
						let cha = lgt_k - rest ;
						let hou_str = new_str_show.substr(i, rest);
						let qian_str = new_str_show.substr(0, cha);
						item_str = hou_str + qian_str ;
					}
					
					console.log(item_str)
					for (let j = 0; j < item_str.length; j++) {
						item_list.push(item_str.substr(j, 1))
						
					}
					list.push({list:item_list})
					
				}
				return list ;
			},
			slideChange(e) {
				this.$emit('getCurrentIndex', e.detail.current);

			}
		}
	};
</script>

<style lang="scss">
	._notice {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		z-index: 9;
		width: 100%;

		color: #ffffff;

		overflow: hidden;
		box-sizing: border-box; //border-box
		.swiper-item-a {
			text-align: center;
			// display: inline-block;
			// text-align: justify;
			//letter-spacing: 17.5px;
		}
		.swiper-item-l {
			//text-align: left;
			//text-align: left;
			
		}

		.swiper-item-r {
			//text-align: left;
			//text-align: left;
			//text-align: right;
			
		}
	}
</style>

2.引用插件

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

下面index.vue是引用插件的 代码片.

<template>
	<view>
		<ayGoLeftR style="color: #000000;" :width="300" :str_show_num="6"   str_show="文字无缝左滚示例" ></ayGoLeftR>
	</view>
</template>

<script>
	import ayGoLeftR from '../components/ay-goLeft_r/ay-goLeft_r.vue';
	export default {
		components: {
			ayGoLeftR ,
		},
		
		data() {
			return {
				
			};
		},
		
		methods: {
			
		}

	}
</script>

<style lang="scss">
	
</style>

微信小程序预览效果

效果图

扫描公众号，了解更多实例分享：

参考

uni-app文字无缝左滚