色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

HarmonyOS應用開發教程 圓角list實現

鴻蒙時代 ? 來源:鴻蒙時代 ? 作者:鴻蒙時代 ? 2022-04-10 10:35 ? 次閱讀

效果展示:

poYBAGJQ8AGAevJkAAE9uBjWCSE941.png

Hml


{{ $item.indexTxt }}
{{ $item.title }}{{ $item.desc }}
list_arrow_gray.png
{{ $item.indexTxt }}
{{ $item.title }}{{ $item.desc }}
list_arrow_gray.png
{{ $item.indexTxt }}
{{ $item.title }}{{ $item.desc }}
list_arrow_gray.png

Css

.container {
    flex-direction: column;
    align-items: center;
    background-color: #5e7c85;
    padding-top: 52px;
}

.topList_corner_round_bg {
    width: 100%;
    height: 240px;
    border: 1px solid #000000;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
    divider-color: #000000;
    divider-height: 1px;
}

.middleList_corner_round_bg {
    width: 100%;
    height: 160px;
    border: 1px solid #000000;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
    divider-color: #000000;
    divider-height: 1px;
}

.bottomList_corner_round_bg {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
    divider-color: #000000;
    divider-height: 1px;
}

/**
選中背景
*/

.list_corner_round_top {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background: linear-gradient(270deg, #BFEEFF, #40B9FF);
}

.list_corner_round_mid {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    background: linear-gradient(270deg, #BFEEFF, #40B9FF);
}

.list_corner_round_bottom {
    width: 100%;
    height: 78px;
    border: 1px solid #000000;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    background: linear-gradient(270deg, #BFEEFF, #40B9FF);
}

.list_corner_round {
    width: 100%;
    height: 78px;
    border: 1px solid #000000;
    border-radius: 7px;
    background: linear-gradient(270deg, #BFEEFF, #40B9FF);
}

.todo_item_top {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.todo_item_mid {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.todo_item_bottom {
    width: 100%;
    height: 78px;
    border: 1px solid #000000;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.todo_item_round {
    width: 100%;
    height: 78px;
    border: 1px solid #000000;
    border-radius: 7px;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.item_title {
    font-size: 22px;
    text-align: left;
    margin-start: 10px;
    font-weight: 600;
}

.item_desc {
    font-size: 16px;
    margin-top: 10px;
    color: #77787b;
    font-weight: 400;
}

.div_icon {
    width: 50px;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin-start: 10px;
}

.item_icon {
    height: 50px;
    width: 100%;
    align-items: center;
    border-radius: 35px;
    background-color: orange;
}

.txt_title {
    font-size: 22px;
    font-weight: 600;
}

.div_right {
    flex-direction: column;
    justify-content: center;
}

.div_arrow {
    height: 100%;
    width: 100%;
    margin-end: 10px;
    justify-content: center;
    align-items: center;
}

.item_arrow {
    margin-start: 316;
    height: 14px;
    width: 14px;
}

Js

import prompt from '@system.prompt';

var timeoutID;

const DURATION = 600;

export default {
    data: {
        topList: [{
                      title: 'title3_1',
                      desc: 'description3_1',
                      cls: 'todo_item_top',
                      iconColor: '#99FF0000',
                      txtColor: 'white',
                      indexTxt: 'R'
                  }, {
                      title: 'title3_2',
                      desc: 'description3_2',
                      cls: 'todo_item_mid',
                      iconColor: '#99FF7D00',
                      txtColor: 'white',
                      indexTxt: 'T'
                  }, {
                      title: 'title3_3',
                      desc: 'description3_3',
                      cls: 'todo_item_bottom',
                      iconColor: '#99FF00FF',
                      txtColor: 'white',
                      indexTxt: 'Y'
                  }
        ],
        middleList: [{
                         title: 'title2_1',
                         desc: 'description2_1',
                         cls: 'todo_item_top',
                         iconColor: '#9900FF00',
                         txtColor: 'white',
                         indexTxt: 'U'
                     }, {
                         title: 'title2_2',
                         desc: 'description2_2',
                         cls: 'todo_item_bottom',
                         iconColor: '#9900FFFF',
                         txtColor: 'white',
                         indexTxt: 'I'
                     }
        ],
        bottomList: [{
                         title: 'title1_1',
                         desc: 'description1_1',
                         cls: 'todo_item_round',
                         iconColor: '#990000FF',
                         txtColor: 'white',
                         indexTxt: 'O'
                     }
        ]
    },
    onTopListItemClick($idx) {
        console.info("id = " + $idx);
        let index = $idx;
        let size = this.topList.length;
        if (index == -1) {
            for (let i = 0; i < size; i++) {
                if (i == 0) {
                    this.topList[i].cls = "todo_item_top"
                } else if (i == size - 1) {
                    this.topList[i].cls = "todo_item_bottom"
                } else {
                    this.topList[i].cls = "todo_item_mid"
                }
            }
            return;
        }
        this.onMiddleListItemClick(-1);
        this.onBottomListItemClick(-1);
        prompt.showToast({
            message: this.topList[index].title
        });
        for (let i = 0; i < size; i++) {
            if (index == i) {
                if (i == 0) {
                    this.topList[i].cls = "list_corner_round_top"
                } else if (i == size - 1) {
                    this.topList[i].cls = "list_corner_round_bottom"
                } else {
                    this.topList[i].cls = "list_corner_round_mid"
                }

                clearTimeout(timeoutID);
                timeoutID = setTimeout(this.clearTopItemBg, DURATION);
            } else {
                if (i == 0) {
                    this.topList[i].cls = "todo_item_top"
                } else if (i == size - 1) {
                    this.topList[i].cls = "todo_item_bottom"
                } else {
                    this.topList[i].cls = "todo_item_mid"
                }
            }
        }
    },
    onMiddleListItemClick($idx) {
        console.info("id = " + $idx);
        let index = $idx;
        if (index == -1) {
            for (let i = 0; i < 2; i++) {
                if (i == 0) {
                    this.middleList[i].cls = "todo_item_top"
                } else {
                    this.middleList[i].cls = "todo_item_bottom"
                }
            }
            return;
        }
        this.onTopListItemClick(-1);
        this.onBottomListItemClick(-1)
        prompt.showToast({
            message: this.middleList[index].title
        });
        for (let i = 0; i < 2; i++) {
            if (index == i) {
                if (i == 0) {
                    this.middleList[i].cls = "list_corner_round_top"
                } else {
                    this.middleList[i].cls = "list_corner_round_bottom"
                }

                clearTimeout(timeoutID);
                timeoutID = setTimeout(this.clearMiddleItemBg, DURATION);
            } else {
                if (i == 0) {
                    this.middleList[i].cls = "todo_item_top"
                } else {
                    this.middleList[i].cls = "todo_item_bottom"
                }
            }
        }
    },
    onBottomListItemClick($idx) {
        console.info("id = " + $idx);
        let index = $idx;
        if (index == -1) {
            this.bottomList[0].cls = "todo_item_round"
            return;
        }
        this.onTopListItemClick(-1);
        this.onMiddleListItemClick(-1);
        prompt.showToast({
            message: this.bottomList[index].title
        });
        for (let i = 0; i < 2; i++) {
            this.bottomList[0].cls = "list_corner_round"
            clearTimeout(timeoutID);
            timeoutID = setTimeout(this.clearBottomItemBg, DURATION);
        }
    },
    clearTopItemBg() {
        this.onTopListItemClick(-1);
    },
    clearMiddleItemBg() {
        this.onMiddleListItemClick(-1);
    },
    clearBottomItemBg() {
        this.onBottomListItemClick(-1);
    }
}
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 鴻蒙系統
    +關注

    關注

    183

    文章

    2634

    瀏覽量

    66308
  • HarmonyOS
    +關注

    關注

    79

    文章

    1973

    瀏覽量

    30144
收藏 人收藏

    評論

    相關推薦

    HarmonyOS開發案例:【使用List組件實現設置項】

    使用List組件、Toggle組件以及Router接口,實現一個簡單的設置頁,點擊將跳轉到對應的詳細設置頁面。
    的頭像 發表于 05-10 17:01 ?923次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發</b>案例:【使用<b class='flag-5'>List</b>組件<b class='flag-5'>實現</b>設置項】

    HarmonyOS開發案例:【使用List組件實現商品列表】

    OpenHarmony ArkTS提供了豐富的接口和組件,開發者可以根據實際場景和開發需求,選用不同的組件和接口。
    的頭像 發表于 05-10 16:41 ?1320次閱讀
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>開發</b>案例:【使用<b class='flag-5'>List</b>組件<b class='flag-5'>實現</b>商品列表】

    HarmonyOS應用開發-UI設計開發與預覽

    `. 介紹通過智能表待辦應用開發,讓開發者了解智能表HarmonyOS應用開發的全流程,實現從工程創建到界面預覽全過程。使用HUAWEIDe
    發表于 09-23 17:51

    HarmonyOS】圖片圓角功能

    前輩的神器),只能靠自己手x代碼,廢話不多說,來看下鴻蒙系統里如何實現基本的圖片圓角功能吧。如今大部分美術在設計樣式的時候,都會給圖片帶上圓角,在鴻蒙開發過程中,一定會遇到要對圖片進行
    發表于 10-19 13:12

    鴻蒙系統應用開發之JS實現一個簡單的List

    原文鏈接:https://harmonyos.51cto.com/posts/1715在之前的文章鴻蒙應用開發之怎么更好的遠程連接手表模擬器做調試里我運行了一個穿戴設備的應用,利用JS UI實現了一
    發表于 11-13 10:32

    HarmonyOS 應用開發在線體驗-to do list

    一、技術相關 使用語言:Js體驗內容: to do list工具:在線開發https://playground.harmonyos.com/#/cn/onlineDemo?ha_source
    發表于 08-14 15:48

    HarmonyOSAPP開發 --list-item-group練習

    開發過程部分代碼如下圖Hml CSS JS 相關問題討論 1,For=”listgroup’ in list的作用,id里是不是list所存放的數值給了listgroup?還是list
    發表于 08-19 11:26

    HarmonyOS應用開發-圓角list實現

    效果展示:Hml<div class="container"> <list class="
    發表于 04-09 11:00

    CAD制圖中倒圓角的技巧

    圓角命令是FILLET,圓角功能可使用與對象相切且指定半徑的圓弧來連接兩個對象。可以創建兩種圓角,內角點稱為內圓角,外角點稱為外圓角。可以
    發表于 10-19 15:03 ?1.9w次閱讀
    CAD制圖中倒<b class='flag-5'>圓角</b>的技巧

    HarmonyOS開發者日 鴻蒙是否會有新進展

    據悉華為 HarmonyOS 應用開發在線體驗網站現已上線,開發者可以通過在線體驗“To-Do List”Demo,但是需要注意的是“To-Do L
    的頭像 發表于 04-25 09:58 ?1821次閱讀

    華為開發HarmonyOS零基礎入門:四步實現HarmonyOS應用

    華為開發HarmonyOS零基礎入門:四步實現HarmonyOS應用,可以自定義主鍵實際應用在開發者界面。
    的頭像 發表于 10-23 10:05 ?1946次閱讀
    華為<b class='flag-5'>開發</b>者<b class='flag-5'>HarmonyOS</b>零基礎入門:四步<b class='flag-5'>實現</b><b class='flag-5'>HarmonyOS</b>應用

    華為開發HarmonyOS零基礎入門:Word圖片資源支持預覽效果

    華為開發HarmonyOS零基礎入門:Word圖片資源支持預覽效果,list主鍵函數可以做布局,呈現多個堆疊顯示效果。
    的頭像 發表于 10-23 10:12 ?1494次閱讀
    華為<b class='flag-5'>開發</b>者<b class='flag-5'>HarmonyOS</b>零基礎入門:Word圖片資源支持預覽效果

    華為開發者分論壇HarmonyOS學生公開課-如何學習HarmonyOS應用開發

    2021華為開發者分論壇HarmonyOS學生公開課-如何學習HarmonyOS應用開發
    的頭像 發表于 10-24 11:09 ?2132次閱讀
    華為<b class='flag-5'>開發</b>者分論壇<b class='flag-5'>HarmonyOS</b>學生公開課-如何學習<b class='flag-5'>HarmonyOS</b>應用<b class='flag-5'>開發</b>?

    實現PCB板邊倒圓角

    看下圖: PCB外形倒圓角的點,剛好就是我們凸包需求出的點,接下來我們將玩轉凸包了,只要求出凸包,那么就可以實現PCB板邊倒圓角啦。
    的頭像 發表于 05-07 14:28 ?1.1w次閱讀

    面向HarmonyOS開發者的HarmonyOS 3.0 Beta介紹

    2021年10月,我們面向開發者發布了HarmonyOS 3.0 Developer Preview版,但開發的腳步永不停歇,現在我們又更新了API版本,配套發布了HarmonyOS
    的頭像 發表于 07-06 20:34 ?3298次閱讀
    主站蜘蛛池模板: 国产精品99AV在线观看| 视频一区视频二区ae86| 好大好硬好湿再深一点网站| 被同桌摸出水来了好爽的视频 | 国产成人综合95精品视频免费| 99在线精品国自产拍| 78m成人亚洲| 中文在线无码高潮潮喷在线| 影音先锋男人av橹橹色| 一个人在线观看免费视频| 亚洲字幕久久| 一本之道高清www在线观看 | 老外的好大c的我好爽| 九九热在线观看| 久久精品久久精品| 久久久大香菇| 拉菲娱乐主管高工资q39709| 空姐内射出白浆10p| 刘梓晨啪啪啪| 嫩草影院永久在线一二三四| 美女扒开腿让男人桶个爽| 免费人妻AV无码专区五月| 欧美大jiji| 日本免费一区二区三区四区五六区| 肉色无边(高h)| 涩涩免费网站| 亚洲 自拍 欧洲 视频二区| 亚洲国产欧美在线看片| 夜色88V精品国产亚洲AV| 最新高清无码专区| JK白丝校花爽到娇喘视频| 成人精品视频| 国产精品自在自线亚洲| 精品淑女少妇AV久久免费| 老师你狠狂| 青春草久久| 亚洲 欧美 国产 视频二区| 亚洲无遮挡无码A片在线| 最新 国产 精品 精品 视频| 被公疯狂玩弄的漂亮人妻| 国产精品久久久精品a级小说|