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

简介: 低代码可视化开发-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>


目录
相关文章
|
1月前
|
数据可视化 前端开发 UED
低代码可视化-Uniapp Cascader级联选择器-代码生成器
Cascader级联选择器是一种常用的UI组件,适用于从具有层级关系的数据中进行选择,如省市区选择、公司层级选择等。它通过分组多列展示选项,支持多级分类、联动选择、搜索与过滤等功能。组件具备自定义样式、禁用选项、清空选项等特性,广泛应用于电商、企业内部系统等场景。代码示例展示了其详细的实现和调用方法。
40 7
低代码可视化-Uniapp Cascader级联选择器-代码生成器
|
2月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
44 1
|
2月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
75 1
|
2月前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
39 0
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
30 0
|
2月前
|
JSON 数据可视化 JavaScript
低代码可视化-uniapp响应式数据data-代码生成器
低代码可视化-uniapp响应式数据data-代码生成器
39 0
|
2月前
|
数据可视化 安全 Android开发
低代码可视化-uniapp蓝牙标签打印-代码生成器
低代码可视化-uniapp蓝牙标签打印-代码生成器
66 0
|
2月前
|
移动开发 数据可视化 小程序
低代码可视化-UniApp二维码可视化-代码生成器
低代码可视化-UniApp二维码可视化-代码生成器
37 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
131 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
63 7