低代码可视化开发-uniapp新闻跑马灯组件-代码生成器

新闻跑马灯效果组件是一种在新闻、数据可视化大屏或其他信息展示场景中常用的动态文本展示方式。它通过滚动文本的形式，在有限的空间内展示更多的信息内容，同时增加了视觉吸引力和动态感。以下是对新闻跑马灯效果组件的详细介绍：

一、定义与功能

新闻跑马灯效果组件，顾名思义，就是模拟传统新闻播报中跑马灯效果的文本展示组件。它允许文本内容在指定的区域内以滚动的方式呈现，支持多种自定义设置，如滚动方向、速度、字体、颜色等，以满足不同场景下的展示需求。

二、应用场景

• 新闻播报：在新闻网站或应用中，用于实时滚动展示最新的新闻标题或摘要。
• 数据可视化大屏：在大数据展示场景中，用于在有限的空间内展示更多的数据指标或文字信息。
• 广告展示：在广告牌或电子显示屏上，用于滚动展示广告内容，吸引观众注意。
• 应用界面：在移动应用或网页界面中，用于展示滚动标语、活动信息或用户提示等。

三、配置方法

新闻跑马灯效果组件的配置方法因平台和应用场景的不同而有所差异，但一般包括以下步骤：

1. 添加组件：在Web应用编辑器、数据可视化平台或移动应用开发环境中，找到并添加跑马灯效果组件到画布或页面中。

• 配置数据源：设置组件要展示的数据内容。这可以是静态文本，也可以是动态数据源（如数据库、API接口等）。

• 调整样式：根据需求调整文本的字体、大小、颜色、滚动方向、速度等样式属性。

内容设计区通过FLEX布局来设计，用户可以根据自己的需求来扩展实现。

• 导出源码预览与发布：预览跑马灯效果，确认无误后发布到相应的平台或应用中。

四、技术特性与优势

• 高度自定义：支持多种自定义属性，如字体样式、滚动行为、速度及方向控制等。
• 易于集成：在多种开发环境和平台中均可轻松集成和使用。
• 提升用户体验：通过动态滚动的方式展示信息，增加视觉吸引力和用户互动性。
• 高效利用空间：在有限的空间内展示更多的信息内容，提高信息展示效率。

五、组件库代码

<template>
	<view class="diy-marquee" @touchstart="mouseover" @mouseover="mouseover" @touchend="mouseout" @mouseout="mouseout" :style="'height:'+(lineHeight*showLine)+'rpx;'">
		<view class="diy-marquee-content flex flex-direction-column" :style="'margin-top:-'+marginTop+'rpx;'">
			<slot v-for="(item,index) in showdata" :item="item" :height='lineHeight'></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'maoScroll',
		data() {
			return {
				showdata: [],
				marginTop: 0,
				showLine: 0,
			}
		},
		props:{
			data: {
				type: Array,
				default: []
			},
			showNum: {
				type: Number,
				default: 4,
			},
			lineHeight: {
				type: Number,
				default: 80,
			},
			lineAnimation: {
				type: Number,
				default: 500,
			},
			animation: {
				type: Number,
				default: 2000,
			}
		},
		methods: {
			init: function(){
				this.showLine = this.showNum < this.data.length ? this.showNum : this.data.length;
				for(let i = 0; i < this.data.length; i++){
					this.showdata.push(this.data[i]);
				}
				for(let i = 0; i < this.showLine; i++){
					this.showdata.push(this.data[i]);
				}
				this.timer = setInterval(this.animationFunc, this.animation);
			},
			 //鼠标悬停或触摸
			mouseover() {
				clearInterval(this.timer);
				this.timer = null;
			},
			//鼠标或触摸离开，继续滚动
			mouseout() {
				this.init();
			},
			animationFunc: function(){
				if(this.marginTop >= this.data.length*this.lineHeight){
					this.marginTop = 0;
				}
				let stepTime = this.lineAnimation/this.lineHeight;
				
				var step = 0;
				let self = this;
				var index = setInterval(function(){
					self.marginTop = self.marginTop + 1;
					step++;
					if (step >= self.lineHeight) {
						clearInterval(index);
					}
				}, stepTime);
			}
		},
		watch: {
			data(outdata, newdata) {
				this.init();
			}
		}
	}
</script>

<style>
	.diy-marquee{width: 100%;overflow: hidden;}
</style>

六、组件库调用

<template>
	<view class="container container329152">
		<view style="height: 708rpx" class="flex diygw-col-24 flex-wrap">
			<diy-marquee v-slot="{ item: item }" class="diygw-col-24" :data="data.data" :showNum="3" :lineHeight="236" :lineAnimation="500" :animation="2000">
				<view style="height: 236rpx" class="flex diygw-col-24 flex-direction-column flex-wrap">
					<view class="flex diygw-col-24 flex-direction-column flex-wrap flex-clz">
						<view class="flex flex-wrap diygw-col-24 flex-direction-column flex22-clz">
							<text class="diygw-col-0 text24-clz">
								{{ item.title }}
							</text>
						</view>
						<view class="flex flex-wrap diygw-col-24 items-baseline flex3-clz">
							<text class="diygw-col-0 text5-clz">
								{{ item.remark }}
							</text>
						</view>
					</view>
				</view>
			</diy-marquee>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				data: {
					code: 0,
					msg: '',
					data: [
						{
							title: '',
							remark: '',
							id: 0,
							attr: {
								title: ''
							},
							img: ''
						}
					]
				}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {
				await this.dataApi();
			},
			// 新增接口 API请求方法
			async dataApi(param) {
				let thiz = this;
				param = param || {};

				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = 'https://php.diygw.com/article.php';
				let http_data = {};
				let http_header = {};

				let data = await this.$http.post(http_url, http_data, http_header, 'json');

				this.data = data;
			},

			// 新增方法 自定义方法
			async tttFunction(param) {
				let thiz = this;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		padding-top: 20rpx;
		border-bottom-left-radius: 12rpx;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		border-top-right-radius: 12rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-shadow: 0rpx 0rpx 28rpx 11px rgba(218, 255, 225, 0.84), 0rpx 0rpx 10rpx 1px rgba(31, 31, 31, 0.06);
		overflow: hidden;
		width: calc(100% - 20rpx - 20rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 20rpx;
		padding-right: 20rpx;
	}
	.flex22-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text24-clz {
		font-weight: bold;
		font-size: 32rpx !important;
	}
	.flex3-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.text5-clz {
		margin-left: 10rpx;
		color: #34b39d;
		flex: 1;
		font-size: 28rpx !important;
		margin-top: 0rpx;
		margin-bottom: 0rpx;
		margin-right: 10rpx;
	}
	.container329152 {
	}
</style>