返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-圆角list实现

李洋水蛟龙
2022-04-09 11:00:11
阅读量0
HarmonyOS
0
0
效果展示：
Hml
  1. <div class="container">
  2.     <list class="topList_corner_round_bg" scrolleffect="no">
  3.         <list-item for="{{ topList }}" class="{{ $item.cls }}" onclick="onTopListItemClick($idx)" id="{{ $idx }} ">
  4.             <stack>
  5.                 <div style="flex-direction : row;">
  6.                     <stack class="div_icon">
  7.                         <div class="item_icon" style="background-color : {{ $item.iconColor }}"></div>
  8.                         <text class="txt_title" style="color : {{ $item.txtColor }};">{{ $item.indexTxt }}</text>
  9.                     </stack>
  10.                     <div class="div_right">
  11.                         <text class="item_title">{{ $item.title }}</text>
  12.                         <text class="item_title item_desc">{{ $item.desc }}</text>
  13.                     </div>
  14.                 </div>
  15.                 <div class="div_arrow">
  16.                     <image src="/common/images/list_arrow_gray.png" class="item_arrow"/>
  17.                 </div>
  18.             </stack>

  20.         </list-item>
  21.     </list>

  23.     <list class="middleList_corner_round_bg">
  24.         <list-item for="{{ middleList }}" class="{{ $item.cls }}" onclick="onMiddleListItemClick($idx)" id="{{ $idx }}">
  25.             <stack>
  26.                 <div style="flex-direction : row;">
  27.                     <stack class="div_icon">
  28.                         <div class="item_icon" style="background-color : {{ $item.iconColor }}"></div>
  29.                         <text class="txt_title" style="color : {{ $item.txtColor }};">{{ $item.indexTxt }}</text>
  30.                     </stack>
  31.                     <div class="div_right">
  32.                         <text class="item_title">{{ $item.title }}</text>
  33.                         <text class="item_title item_desc">{{ $item.desc }}</text>
  34.                     </div>
  35.                 </div>
  36.                 <div class="div_arrow">
  37.                     <image src="/common/images/list_arrow_gray.png" class="item_arrow"/>
  38.                 </div>
  39.             </stack>
  40.         </list-item>
  41.     </list>

  43.     <list class="bottomList_corner_round_bg">
  44.         <list-item for="{{ bottomList }}" class="{{ $item.cls }}" onclick="onBottomListItemClick($idx)" id="{{ $idx }}">
  45.             <stack>
  46.                 <div style="flex-direction : row;">
  47.                     <stack class="div_icon">
  48.                         <div class="item_icon" style="background-color : {{ $item.iconColor }}"></div>
  49.                         <text class="txt_title" style="color : {{ $item.txtColor }};">{{ $item.indexTxt }}</text>
  50.                     </stack>
  51.                     <div class="div_right">
  52.                         <text class="item_title">{{ $item.title }}</text>
  53.                         <text class="item_title item_desc">{{ $item.desc }}</text>
  54.                     </div>
  55.                 </div>
  56.                 <div class="div_arrow">
  57.                     <image src="/common/images/list_arrow_gray.png" class="item_arrow"/>
  58.                 </div>
  59.             </stack>
  60.         </list-item>
  61.     </list>
  62. </div>
复制代码
Css
  1. .container {
  2.     flex-direction: column;
  3.     align-items: center;
  4.     background-color: #5e7c85;
  5.     padding-top: 52px;
  6. }

  8. .topList_corner_round_bg {
  9.     width: 100%;
  10.     height: 240px;
  11.     border: 1px solid #000000;
  12.     text-align: center;
  13.     margin-left: 10px;
  14.     margin-right: 10px;
  15.     border-radius: 8px;
  16.     divider-color: #000000;
  17.     divider-height: 1px;
  18. }

  20. .middleList_corner_round_bg {
  21.     width: 100%;
  22.     height: 160px;
  23.     border: 1px solid #000000;
  24.     text-align: center;
  25.     margin-top: 10px;
  26.     margin-left: 10px;
  27.     margin-right: 10px;
  28.     border-radius: 8px;
  29.     divider-color: #000000;
  30.     divider-height: 1px;
  31. }

  33. .bottomList_corner_round_bg {
  34.     width: 100%;
  35.     height: 80px;
  36.     border: 1px solid #000000;
  37.     text-align: center;
  38.     margin-top: 10px;
  39.     margin-left: 10px;
  40.     margin-right: 10px;
  41.     border-radius: 8px;
  42.     divider-color: #000000;
  43.     divider-height: 1px;
  44. }

  46. /**
  47. 选中背景
  48. */

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

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

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

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

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

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

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

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

  116. .item_title {
  117.     font-size: 22px;
  118.     text-align: left;
  119.     margin-start: 10px;
  120.     font-weight: 600;
  121. }

  123. .item_desc {
  124.     font-size: 16px;
  125.     margin-top: 10px;
  126.     color: #77787b;
  127.     font-weight: 400;
  128. }

  130. .div_icon {
  131.     width: 50px;
  132.     height: 100%;
  133.     align-items: center;
  134.     justify-content: center;
  135.     margin-start: 10px;
  136. }

  138. .item_icon {
  139.     height: 50px;
  140.     width: 100%;
  141.     align-items: center;
  142.     border-radius: 35px;
  143.     background-color: orange;
  144. }

  146. .txt_title {
  147.     font-size: 22px;
  148.     font-weight: 600;
  149. }

  151. .div_right {
  152.     flex-direction: column;
  153.     justify-content: center;
  154. }

  156. .div_arrow {
  157.     height: 100%;
  158.     width: 100%;
  159.     margin-end: 10px;
  160.     justify-content: center;
  161.     align-items: center;
  162. }

  164. .item_arrow {
  165.     margin-start: 316;
  166.     height: 14px;
  167.     width: 14px;
  168. }
复制代码

Js
  1. import prompt from '@system.prompt';

  3. var timeoutID;

  5. const DURATION = 600;

  7. export default {
  8.     data: {
  9.         topList: [{
  10.                       title: 'title3_1',
  11.                       desc: 'description3_1',
  12.                       cls: 'todo_item_top',
  13.                       iconColor: '#99FF0000',
  14.                       txtColor: 'white',
  15.                       indexTxt: 'R'
  16.                   }, {
  17.                       title: 'title3_2',
  18.                       desc: 'description3_2',
  19.                       cls: 'todo_item_mid',
  20.                       iconColor: '#99FF7D00',
  21.                       txtColor: 'white',
  22.                       indexTxt: 'T'
  23.                   }, {
  24.                       title: 'title3_3',
  25.                       desc: 'description3_3',
  26.                       cls: 'todo_item_bottom',
  27.                       iconColor: '#99FF00FF',
  28.                       txtColor: 'white',
  29.                       indexTxt: 'Y'
  30.                   }
  31.         ],
  32.         middleList: [{
  33.                          title: 'title2_1',
  34.                          desc: 'description2_1',
  35.                          cls: 'todo_item_top',
  36.                          iconColor: '#9900FF00',
  37.                          txtColor: 'white',
  38.                          indexTxt: 'U'
  39.                      }, {
  40.                          title: 'title2_2',
  41.                          desc: 'description2_2',
  42.                          cls: 'todo_item_bottom',
  43.                          iconColor: '#9900FFFF',
  44.                          txtColor: 'white',
  45.                          indexTxt: 'I'
  46.                      }
  47.         ],
  48.         bottomList: [{
  49.                          title: 'title1_1',
  50.                          desc: 'description1_1',
  51.                          cls: 'todo_item_round',
  52.                          iconColor: '#990000FF',
  53.                          txtColor: 'white',
  54.                          indexTxt: 'O'
  55.                      }
  56.         ]
  57.     },
  58.     onTopListItemClick($idx) {
  59.         console.info("id = " + $idx);
  60.         let index = $idx;
  61.         let size = this.topList.length;
  62.         if (index == -1) {
  63.             for (let i = 0; i < size; i++) {
  64.                 if (i == 0) {
  65.                     this.topList[i].cls = "todo_item_top"
  66.                 } else if (i == size - 1) {
  67.                     this.topList[i].cls = "todo_item_bottom"
  68.                 } else {
  69.                     this.topList[i].cls = "todo_item_mid"
  70.                 }
  71.             }
  72.             return;
  73.         }
  74.         this.onMiddleListItemClick(-1);
  75.         this.onBottomListItemClick(-1);
  76.         prompt.showToast({
  77.             message: this.topList[index].title
  78.         });
  79.         for (let i = 0; i < size; i++) {
  80.             if (index == i) {
  81.                 if (i == 0) {
  82.                     this.topList[i].cls = "list_corner_round_top"
  83.                 } else if (i == size - 1) {
  84.                     this.topList[i].cls = "list_corner_round_bottom"
  85.                 } else {
  86.                     this.topList[i].cls = "list_corner_round_mid"
  87.                 }

  89.                 clearTimeout(timeoutID);
  90.                 timeoutID = setTimeout(this.clearTopItemBg, DURATION);
  91.             } else {
  92.                 if (i == 0) {
  93.                     this.topList[i].cls = "todo_item_top"
  94.                 } else if (i == size - 1) {
  95.                     this.topList[i].cls = "todo_item_bottom"
  96.                 } else {
  97.                     this.topList[i].cls = "todo_item_mid"
  98.                 }
  99.             }
  100.         }
  101.     },
  102.     onMiddleListItemClick($idx) {
  103.         console.info("id = " + $idx);
  104.         let index = $idx;
  105.         if (index == -1) {
  106.             for (let i = 0; i < 2; i++) {
  107.                 if (i == 0) {
  108.                     this.middleList[i].cls = "todo_item_top"
  109.                 } else {
  110.                     this.middleList[i].cls = "todo_item_bottom"
  111.                 }
  112.             }
  113.             return;
  114.         }
  115.         this.onTopListItemClick(-1);
  116.         this.onBottomListItemClick(-1)
  117.         prompt.showToast({
  118.             message: this.middleList[index].title
  119.         });
  120.         for (let i = 0; i < 2; i++) {
  121.             if (index == i) {
  122.                 if (i == 0) {
  123.                     this.middleList[i].cls = "list_corner_round_top"
  124.                 } else {
  125.                     this.middleList[i].cls = "list_corner_round_bottom"
  126.                 }

  128.                 clearTimeout(timeoutID);
  129.                 timeoutID = setTimeout(this.clearMiddleItemBg, DURATION);
  130.             } else {
  131.                 if (i == 0) {
  132.                     this.middleList[i].cls = "todo_item_top"
  133.                 } else {
  134.                     this.middleList[i].cls = "todo_item_bottom"
  135.                 }
  136.             }
  137.         }
  138.     },
  139.     onBottomListItemClick($idx) {
  140.         console.info("id = " + $idx);
  141.         let index = $idx;
  142.         if (index == -1) {
  143.             this.bottomList[0].cls = "todo_item_round"
  144.             return;
  145.         }
  146.         this.onTopListItemClick(-1);
  147.         this.onMiddleListItemClick(-1);
  148.         prompt.showToast({
  149.             message: this.bottomList[index].title
  150.         });
  151.         for (let i = 0; i < 2; i++) {
  152.             this.bottomList[0].cls = "list_corner_round"
  153.             clearTimeout(timeoutID);
  154.             timeoutID = setTimeout(this.clearBottomItemBg, DURATION);
  155.         }
  156.     },
  157.     clearTopItemBg() {
  158.         this.onTopListItemClick(-1);
  159.     },
  160.     clearMiddleItemBg() {
  161.         this.onMiddleListItemClick(-1);
  162.     },
  163.     clearBottomItemBg() {
  164.         this.onBottomListItemClick(-1);
  165.     }
  166. }
复制代码





举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友