鸿蒙JS开发6 鸿蒙的提示框、对话框和提示菜单的应用

想了解更多内容，请访问：

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

本文主要描述对鸿蒙幻灯片组件、跑马灯组件、提示框、提示菜单、页面跳转以及对话框的应用

幻灯片组件：<image-animator>

视图及样式：

<div class="container"> 
    <div class="c1"> 
        <!--幻灯片组件--> 
        <image-animator class="image-animator" duration="10s" fixedsize="false" images="{{imagesDatas}}"> 
        </image-animator> 
    </div> 
</div> 

.container { 
    width: 100%; 
    height: 1500px; 
    display: flex; 
    flex-direction: column; 
} 
.c1{ 
    width: 100%; 
    height: 35%; 
} 
.image-animator{ 
    width: 100%; 
    height: 100%; 
} 

业务逻辑层通过fetch请求向nginx反向代理服务请求所需数据

import fetch from '@system.fetch'; 
 
export default { 
    data: { 
        imagesDatas:[] 
        
    }, 
 
    onInit(){ 
        fetch.fetch({ 
            //url对应的地址为通过内网穿透工具natapp映射出的nginx反向代理服务的地址 
            url:'http://ibk3v7.natappfree.cc/text/images0.json', 
            responseType:"json", 
            success:(resp)=>{ 
                let datas = JSON.parse(resp.data); 
                this.imagesDatas = datas.imagedatas; 
 
            } 
        }); 
    } 

images0.json文件中定义的数据：

效果图(图片是可以自动播放的)：

跑马灯组件：<marquee>

<div class="container"> 
    <marquee>金牛辞旧岁，万里贺新春。让快乐与你同行，让健康与你相伴，将美好与团圆满满托付于你</marquee> 
</div> 

效果图：

本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！