0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS应用开发—marquee组件的使用

鸿蒙时代 来源:鸿蒙时代 作者:鸿蒙时代 2022-04-18 10:22 次阅读
poYBAGJcyo6AJWv7AABP3G6ofVE320.png


1.创建项目

pYYBAGJcyqiAVGbTAAAqKHfMY7U034.png

2.示例代码
hml


{{marqueeCustomData}}
StartStop

css

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #ffffff;
}
.customMarquee {
    width: 100%;
    height: 80px;
    padding: 10px;
    margin: 20px;
    border: 4px solid #ff8888;
    border-radius: 20px;
    font-size: 40px;
    color: #ff8888;
    font-weight: bolder;
    font-family: serif;
    background-color: #ffdddd;
}
.content {
    flex-direction: row;
}
.controlButton {
    flex-grow: 1;
    background-color: #F2F2F2;
    text-color: #0D81F2;
}

js

export default {
    data: {
        scrollAmount: 10,
        loop: 3,
        marqueeDir: 'left',
        marqueeCustomData: '节假日大酬宾,盛大开幕',
    },
    onStartClick (evt) {
        this.$element('customMarquee').start();
    },
    onStopClick (evt) {
        this.$element('customMarquee').stop();
    }
}

审核编辑:符乾江
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 应用开发
    +关注

    关注

    0

    文章

    58

    浏览量

    9370
  • HarmonyOS
    +关注

    关注

    79

    文章

    1977

    浏览量

    30258
收藏 人收藏

    评论

    相关推荐

    HarmonyOS开发指导类文档更新速递(下)

    伴随着HarmonyOS 5.0.0 Release、HarmonyOS 5.0.1 Release版本的发布,HarmonyOS官网文档也带来了不少上新内容。本期HarmonyOS
    的头像 发表于 12-30 09:54 78次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>指导类文档更新速递(下)

    HarmonyOS开发指导类文档更新速递(上)

    伴随着HarmonyOS 5.0.0 Release版本的发布,HarmonyOS官网文档也带来了不少上新内容。本期HarmonyOS NEXT开发者资料直通车将从文档更新角度为
    的头像 发表于 12-30 09:50 76次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>指导类文档更新速递(上)

    鸿蒙ArkTS声明式组件Marquee

    跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。
    的头像 发表于 06-25 15:52 438次阅读
    鸿蒙ArkTS声明式<b class='flag-5'>组件</b>:<b class='flag-5'>Marquee</b>

    HarmonyOS开发案例:【购物车app】

    OpenHarmony ArkUI框架提供了丰富的动画组件和接口,开发者可以根据实际场景和开发需求,选用丰富的动画组件和接口来实现不同的动画效果。
    的头像 发表于 05-14 18:19 1084次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【购物车app】

    HarmonyOS开发案例:【使用List组件实现设置项】

    使用List组件、Toggle组件以及Router接口,实现一个简单的设置页,点击将跳转到对应的详细设置页面。
    的头像 发表于 05-10 17:01 946次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【使用List<b class='flag-5'>组件</b>实现设置项】

    HarmonyOS开发案例:【使用List组件实现商品列表】

    OpenHarmony ArkTS提供了丰富的接口和组件开发者可以根据实际场景和开发需求,选用不同的组件和接口。
    的头像 发表于 05-10 16:41 1348次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【使用List<b class='flag-5'>组件</b>实现商品列表】

    HarmonyOS开发案例:【基础组件Slider的使用】

    学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件、Text组件共同实现一个可调节的风车动画
    的头像 发表于 05-10 16:01 683次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【基础<b class='flag-5'>组件</b>Slider的使用】

    HarmonyOS开发案例:【Web组件实现抽奖】

    基于ArkTS的声明式开发范式的样例,主要介绍了Web组件如何加载本地和云端H5小程序。
    的头像 发表于 05-09 18:31 1402次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【Web<b class='flag-5'>组件</b>实现抽奖】

    HarmonyOS开发案例:【常用组件与布局】

    HarmonyOS ArkUI提供了丰富多样的UI组件,您可以使用这些组件轻松地编写出更加丰富、漂亮的界面。
    的头像 发表于 05-09 18:20 1233次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【常用<b class='flag-5'>组件</b>与布局】

    HarmonyOS开发案例:【image、image-animator组件

    OpenHarmony提供了常用的图片、图片帧动画播放器组件开发者可以根据实际场景和开发需求,实现不同的界面交互效果,包括:点击阴影效果、点击切换状态、点击动画效果、点击切换动效。
    的头像 发表于 04-26 17:32 1476次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【image、image-animator<b class='flag-5'>组件</b>】

    HarmonyOS开发案例:【 slider组件的使用】

    主要介绍slider滑动条组件的使用。如图所示拖动对应滑动条调节风车的旋转速度以及缩放比例。
    的头像 发表于 04-25 22:02 964次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【 slider<b class='flag-5'>组件</b>的使用】

    HarmonyOS开发案例:【 switch、chart组件的使用】

    基于switch组件和chart组件,实现线形图、占比图、柱状图,并通过switch切换chart组件数据的动静态显示。
    的头像 发表于 04-25 20:58 641次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b>案例:【 switch、chart<b class='flag-5'>组件</b>的使用】

    鸿蒙OS开发实例:【组件化模式】

    组件化一直是移动端比较流行的开发方式,有着编译运行快,业务逻辑分明,任务划分清晰等优点,针对Android端的组件化;与Android端的组件化相比,
    的头像 发表于 04-07 17:44 661次阅读
    鸿蒙OS<b class='flag-5'>开发</b>实例:【<b class='flag-5'>组件</b>化模式】

    HarmonyOS开发技术全面分析

    难度和成本。这能够让开发者聚焦上层业务逻辑,更加便捷、高效地开发应用。 ⚫ 对设备开发者而言, HarmonyOS 采用了组件化的设计方案,
    发表于 02-21 16:31

    鸿蒙开发-ArkUI 组件基础

    1 组件介绍 组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI
    发表于 01-17 19:31