当前位置:网站首页>Harmonyos JS demo application development
Harmonyos JS demo application development
2022-07-06 13:58:00 【Big 1234 grass】
List of articles
Preface
Under the experience "HarmonyOS JS Demo application development ".
Video tutorial :HarmonyOS JS Demo application development
Source warehouse :harmonyos_app_samples
Not yet HarmonyOS Structural understanding , If you need to know , You can refer to Official documents .
In the link above demo, From the perspective of application developers , In general :html According to the content ,css Control style ,JavaScript For interactive .
Because the warehouse code uses Apache License 2.0, It can be copied here / Modify some codes in the warehouse for notes , See warehouse for complete code .
brief introduction :
This example is suitable for introducing how to develop a JS Demo application .
This application is shown by an example of a list JS Interface layout and logic implementation in the process of application development .
Show the list of schedules on the application page , The list item consists of the item name 、 Time 、 The degree of urgency consists of . It supports checking and deleting the event list .
matters needing attention
The code is easy to understand . Here we just look at how one element in the list is laid out .
Because my front end is more delicious , So here's the layout .
html The code is as follows :
<div class="container">
<text class="title">
{
{ $t('strings.hello') }} {
{ title }}
</text>
<list>
<list-item for="{
{todayList}}" class="todo-list-item">
<image class="todo-image-left" src="{
{$item.checkBtn}}" onclick="completeEvent({
{$item.id}})"></image>
<div class="todo-item flex-row">
<div class="todo-name-mark">
<text class="todo-name">{
{$item.event}}</text>
<text class="todo-mark {
{$item.tag}}"></text>
</div>
<text class="todo-time">{
{$item.time}}</text>
</div>
<image class="todo-image-right" src="/common/images/delete.png" onclick="deleteEvent({
{$item.id}})" show="{
{$item.completeState}}"></image>
</list-item>
</list>
</div>
The effect is as follows :
[1] " Appointment "event and " Small yellow dot "tag In a div
( It's called div1 Well ) in .
[2] "14:30"time and div1, In the larger div2( It's called div2 Well ) in . Use Flex Layout up and down .
[3] ️、 and div2, For one list-item.
边栏推荐
- 7-14 error ticket (PTA program design)
- SRC挖掘思路及方法
- 7-4 散列表查找(PTA程序设计)
- 实验五 类和对象
- Poker game program - man machine confrontation
- [graduation season · advanced technology Er] goodbye, my student days
- Leetcode.3 无重复字符的最长子串——超过100%的解法
- Using qcommonstyle to draw custom form parts
- 1. Preliminary exercises of C language (1)
- (original) make an electronic clock with LCD1602 display to display the current time on the LCD. The display format is "hour: minute: Second: second". There are four function keys K1 ~ K4, and the fun
猜你喜欢
2022 Teddy cup data mining challenge question C idea and post game summary
仿牛客技术博客项目常见问题及解答(二)
Strengthen basic learning records
记一次猫舍由外到内的渗透撞库操作提取-flag
Package bedding of components
使用Spacedesk实现局域网内任意设备作为电脑拓展屏
Meituan dynamic thread pool practice ideas, open source
Record a penetration of the cat shed from outside to inside. Library operation extraction flag
【黑马早报】上海市监局回应钟薛高烧不化;麦趣尔承认两批次纯牛奶不合格;微信内测一个手机可注册俩号;度小满回应存款变理财产品...
[hand tearing code] single case mode and producer / consumer mode
随机推荐
[modern Chinese history] Chapter V test
Matlab opens M file garbled solution
[during the interview] - how can I explain the mechanism of TCP to achieve reliable transmission
Attach the simplified sample database to the SQLSERVER database instance
Callback function ----------- callback
实验七 常用类的使用
[面试时]——我如何讲清楚TCP实现可靠传输的机制
Read only error handling
HackMyvm靶機系列(3)-visions
Intensive literature reading series (I): Courier routing and assignment for food delivery service using reinforcement learning
1. First knowledge of C language (1)
Canvas foundation 2 - arc - draw arc
7-7 7003 combination lock (PTA program design)
透彻理解LRU算法——详解力扣146题及Redis中LRU缓存淘汰
4. Branch statements and loop statements
MATLAB打开.m文件乱码解决办法
[the Nine Yang Manual] 2021 Fudan University Applied Statistics real problem + analysis
HackMyvm靶机系列(2)-warrior
【MySQL数据库的学习】
7-8 7104 Joseph problem (PTA program design)