自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

鴻蒙js開(kāi)發(fā)7 鴻蒙分組列表和彈出Menu菜單

作者：六合李欣
開(kāi)發(fā)
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com/#zz

[[378755]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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

任正非：現(xiàn)在華為必須全面靠自己打造產(chǎn)品，要敢于將鴻蒙推入競(jìng)爭(zhēng)，星光不問(wèn)趕路人,時(shí)光不負(fù)有心人。

1.鴻蒙視圖效果


點(diǎn)擊menu菜單一項(xiàng)，跳轉(zhuǎn)頁(yè)面，底部菜單欄和輪播布局和輪播圖


2.js業(yè)務(wù)數(shù)據(jù)和事件

  1. import prompt from '@system.prompt'; 
  2. import router from '@system.router'; 
  3. export default { 
  4.     data: { 
  5.         title: 'World', 
  6.         fundatas:[{"fathermenu":"員工管理","childmenu":[{"icon":"/common/emp.png","text":"查詢(xún)員工"},{"icon":"/common/emp.png","text":"添加員工"},{"icon":"/common/emp.png","text":"刪除員工"},{"icon":"/common/emp.png","text":"更新員工"}]}, 
  7.                   {"fathermenu":"客戶(hù)服務(wù)","childmenu":[{"icon":"/common/customer.png","text":"一卡通兌"},{"icon":"/common/customer.png","text":"銀聯(lián)服務(wù)"},{"icon":"/common/customer.png","text":"票據(jù)業(yè)務(wù)"}]}, 
  8.                   {"fathermenu":"內(nèi)部管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]}, 
  9.                   {"fathermenu":"合同管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]}, 
  10.                   {"fathermenu":"資產(chǎn)管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]}, 
  11.                   {"fathermenu":"績(jī)效管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]}, 
  12.         ] 
  13.     }, 
  14.     clickitem(itemvalue) 
  15.     { 
  16.  
  17.         if(itemvalue=="查詢(xún)員工") 
  18.         { 
  19.             this.$element("menu").show({ 
  20.                 x: 360, 
  21.                 y: 120 
  22.             }); 
  23.             //this.$element("menu").show(); 
  24.  
  25.         } 
  26.         prompt.showToast({ 
  27.             message:"點(diǎn)擊了菜單"+itemvalue 
  28.  
  29.         }) 
  30.     }, 
  31.     menuSelected(e) { 
  32.         prompt.showToast({ 
  33.             message:"你選擇查詢(xún)的值是:"+e.value 
  34.         }) 
  35.  
  36.         router.push({ 
  37.             uri:"pages/index/index" 
  38.  
  39.         }) 
  40.  
  41.  
  42.     } 
  43. } 

 3.頁(yè)面視圖代碼

  1. <div class="container"> 
  2.      
  3.     <list  class="listview"> 
  4.        <block  for="{{fundatas}}"> 
  5.            <list-item-group  class="groupview"> 
  6.                <list-item class="listitem"> 
  7.                    <text  class="tv1">{{$item.fathermenu}}</text> 
  8.                </list-item> 
  9.                <block  for="{{ (index,value)  in $item.childmenu}}"> 
  10.                  <list-item class="listitemone" onclick="clickitem({{value.text}})"> 
  11.                     <image  class="cimg"  src="{{value.icon}}"></image> 
  12.                     <text class="tv2">{{value.text}}</text> 
  13.                  </list-item> 
  14.                </block> 
  15.            </list-item-group> 
  16.         
  17.        </block> 
  18.      
  19.      
  20.     </list> 
  21.  
  22.  
  23.     <menu id="menu"  title="員工性別"  onselected="menuSelected"> 
  24.         <option value="男性員工"> 
  25.             男性員工 
  26.         </option> 
  27.         <option value="女性員工"> 
  28.             女性員工 
  29.         </option> 
  30.  
  31.     </menu> 
  32. </div> 

 4.樣式代碼

  1. .container { 
  2.     width: 100%; 
  3.     height: 1200px; 
  4. } 
  5. .listview{ 
  6.     width: 100%; 
  7.     height: 100%; 
  8. } 
  9. .groupview{ 
  10.     width: 100%; 
  11.     height: 46%; 
  12.     border-bottom: 5px solid  #DCDCDC; 
  13. } 
  14. .listitem{ 
  15.     width: 100%; 
  16.     height: 20%; 
  17.     display: flex; 
  18.     justify-content: space-around; 
  19. } 
  20. .listitemone { 
  21.     width: 50%; 
  22.     height: 6%; 
  23.     border-bottom: 1px  solid  #DCDCDC; 
  24.     display: flex; 
  25.     justify-content: space-around; 
  26. } 
  27.  
  28. .cimg{ 
  29.     width: 40px; 
  30.     height: 40px; 
  31. } 
  32. .tv1{ 
  33.     font-size: 35px; 
  34.     font-weight: bold; 
  35.     font-family: sans-serif; 
  36.     letter-spacing: 10px; 
  37. } 
  38. .tv2{ 
  39.     font-size: 34px; 
  40.     font-weight: bold; 
  41.     font-family: sans-serif; 
  42. } 

 5.跳轉(zhuǎn)頁(yè)面后的視圖層

  1. <div  class="pageview"> 
  2.     <swiper  class="swiperview"   id="swiper" index="0" > 
  3.         <div class ="sw1"> 
  4.             <swiper class="swiper1" id="swiper1" autoplay="true" index="0" indicator="true"  loop="true" digital="false"> 
  5.                 <div class = "swiperContent1" > 
  6.                     <text class = "text" value="輪播圖1"></text> 
  7.                 </div> 
  8.                 <div class = "swiperContent1"> 
  9.                     <text class = "text" value="輪播圖2"></text> 
  10.                 </div> 
  11.                 <div class = "swiperContent1"> 
  12.                     <text class = "text" value="輪播圖3"></text> 
  13.                 </div> 
  14.             </swiper> 
  15.  
  16.             <swiper class="swiper2" loop="true" vertical="true" indicator="false" autoplay="true"> 
  17.                      <div class="lineview"> 
  18.                        <text>1.鴻蒙</text> 
  19.                      </div> 
  20.                      <div class="lineview"> 
  21.                          <text>2.蘋(píng)果</text> 
  22.                      </div> 
  23.                      <div class="lineview"> 
  24.                          <text>3.安卓</text> 
  25.                      </div> 
  26.             </swiper> 
  27.         </div> 
  28.  
  29.         <div class ="sw2"> 
  30.             <list class="todo-wraper"> 
  31.                 <list-item for="{{todolist}}" class="todo-item"> 
  32.                     <text class="todo-title">{{$item.title}}</text> 
  33.                     <text class="todo-title">{{$item.date}}</text> 
  34.                 </list-item> 
  35.             </list> 
  36.         </div> 
  37.         <div class ="sw3"> 
  38.             <tabs class = "tabs" index="0" vertical="false" onchange="change"> 
  39.                 <tab-bar class="tab-bar" mode="fixed"> 
  40.                     <text class="tab-text">推薦</text> 
  41.                     <text class="tab-text">視頻</text> 
  42.                     <text class="tab-text">本地</text> 
  43.                     <text class="tab-text">內(nèi)容</text> 
  44.                 </tab-bar> 
  45.                 <tab-content class="tabcontent" scrollable="true"> 
  46.                     <div class="item-content" > 
  47.                         <div class="currentview"> 
  48.                                 <div  class="leftview"><text class="infot1">{{weatherInfo.city}}</text></div> 
  49.                                  <div class="rightview1"> 
  50.                                     <div  class="cell"><text>{{winfo.info}}</text></div> 
  51.                                      <div class="cell"><text>{{winfo.direct}}</text></div> 
  52.                                      <div class="cell"><text>{{winfo.power}}</text></div> 
  53.                                  </div> 
  54.  
  55.                         </div> 
  56.                         <div class="nextview"> 
  57.  
  58.  
  59.                         </div> 
  60.  
  61.                     </div> 
  62.                     <div class="item-content" > 
  63.                         <text class="item-title">第二個(gè)</text> 
  64.                     </div> 
  65.                     <div class="item-content" > 
  66.                         <text class="item-title">第三個(gè)</text> 
  67.                     </div> 
  68.                     <div class="item-content" > 
  69.                         <text class="item-title">第四個(gè)</text> 
  70.                     </div> 
  71.                 </tab-content> 
  72.             </tabs> 
  73.         </div> 
  74.  
  75.         <div class ="sw4"> 
  76.             <text>第四幅</text> 
  77.         </div> 
  78.  
  79.     </swiper> 
  80.     <div  class="bottommenu"> 
  81.         <div  for="{{menus}}"  class="menubox"  onclick="changemenu({{$idx}})"> 
  82.             <image  src="{{currentdata==$idx?$item.path:$item.path1}}" class="cimg"></image> 
  83.            <text  class="menutitle">{{$item.menu}}</text> 
  84.         </div> 
  85.     </div> 
  86. </div> 

 6.js業(yè)務(wù)邏輯部分

  1. import   fetch  from '@system.fetch'; 
  2. export default { 
  3.     data: { 
  4.  
  5.         weatherInfo:{}, 
  6.         winfo:{}, 
  7.         nextInfo:[], 
  8.         currentdata:0, 
  9.         title: "", 
  10.         menus:[{menu:"首頁(yè)","path":"./common/ones.png","path1":"./common/oneu.png"}, 
  11.                {menu:"分類(lèi)","path":"./common/cs.png","path1":"./common/cu.png"}, 
  12.                {menu:"內(nèi)容","path":"./common/cons.png","path1":"./common/conu.png"}, 
  13.                {menu:"我的","path":"./common/mys.png","path1":"./common/myu.png"}], 
  14.        todolist: [{ 
  15.       title: '刷leetcode', 
  16.       date: '2020-06-25 10:00:00', 
  17.     }, { 
  18.       title: '看電影', 
  19.       date: '2020-06-27 20:00:00', 
  20.     }, 
  21.                   { 
  22.                       title: '刷leetcode', 
  23.                       date: '2020-06-25 10:00:00', 
  24.                   }, { 
  25.                       title: '看電影', 
  26.                       date: '2020-06-27 20:00:00', 
  27.                   },{ 
  28.                       title: '刷leetcode', 
  29.                       date: '2020-06-25 10:00:00', 
  30.                   }, { 
  31.                       title: '看電影', 
  32.                       date: '2020-06-27 20:00:00', 
  33.                   },{ 
  34.                       title: '刷leetcode', 
  35.                       date: '2020-06-25 10:00:00', 
  36.                   }, { 
  37.                       title: '看電影', 
  38.                       date: '2020-06-27 20:00:00', 
  39.                   }, 
  40.                   { 
  41.                       title: '刷leetcode', 
  42.                       date: '2020-06-25 10:00:00', 
  43.                   }, { 
  44.                       title: '看電影', 
  45.                       date: '2020-06-27 20:00:00', 
  46.                   }, 
  47.                   { 
  48.                       title: '刷leetcode', 
  49.                       date: '2020-06-25 10:00:00', 
  50.                   }, { 
  51.                       title: '看電影', 
  52.                       date: '2020-06-27 20:00:00', 
  53.                   },{ 
  54.                       title: '刷leetcode', 
  55.                       date: '2020-06-25 10:00:00', 
  56.                   }, { 
  57.                       title: '看電影', 
  58.                       date: '2020-06-27 20:00:00', 
  59.                   },{ 
  60.                       title: '刷leetcode', 
  61.                       date: '2020-06-25 10:00:00', 
  62.                   }, { 
  63.                       title: '看電影', 
  64.                       date: '2020-06-27 20:00:00', 
  65.                   },{ 
  66.                       title: '刷leetcode', 
  67.                       date: '2020-06-25 10:00:00', 
  68.                   }, { 
  69.                       title: '看電影', 
  70.                       date: '2020-06-27 20:00:00', 
  71.                   }, 
  72.                   { 
  73.                       title: '刷leetcode', 
  74.                       date: '2020-06-25 10:00:00', 
  75.                   }, { 
  76.                       title: '看電影', 
  77.                       date: '2020-06-27 20:00:00', 
  78.                   },{ 
  79.                       title: '刷leetcode', 
  80.                       date: '2020-06-25 10:00:00', 
  81.                   }, { 
  82.                       title: '看電影', 
  83.                       date: '2020-06-27 20:00:00', 
  84.                   },{ 
  85.                       title: '刷leetcode', 
  86.                       date: '2020-06-25 10:00:00', 
  87.                   }, { 
  88.                       title: '看電影', 
  89.                       date: '2020-06-27 20:00:00', 
  90.                   } 
  91.  
  92.        ] 
  93.     }, 
  94.     onInit() { 
  95.        // this.title = this.$t('strings.world'); 
  96.  
  97.         let  that  =this; 
  98.         fetch.fetch({ 
  99.             url:"http://apis.juhe.cn/simpleWeather/query?city=南京&key=3dc98f3428c44424088015738a070554", 
  100.             responseType:"json", 
  101.             success:function(resp) 
  102.             { 
  103.                 let  currentValue=JSON.parse(resp.data); 
  104.                 that.weatherInfo=currentValue.result; 
  105.                 that.winfo=currentValue.result.realtime; 
  106.                // that.nextInfo=currentValue.future; 
  107.             } 
  108.  
  109.         }) 
  110.     }, 
  111.     changemenu(index) 
  112.     { 
  113.         this.currentdata=index; 
  114.         this.$element('swiper').swipeTo({index: index}); 
  115.  
  116.     } 
  117. } 

 7.樣式代碼

  1. .pageview{ 
  2.     width: 100%; 
  3.     height: 1600px; 
  4.     background-color: azure; 
  5. } 
  6. .bottommenu{ 
  7.     width: 100%; 
  8.     height: 140px; 
  9.     background-color: snow; 
  10.     border-top: 10px  solid  black; 
  11.     z-index:999; 
  12.     position: fixed; 
  13.     left: 0px; 
  14.     bottom: 0px; 
  15.     display: flex; 
  16.     justify-content: center; 
  17.     align-items: center; 
  18. } 
  19. .menubox{ 
  20.  
  21.     width: 22%; 
  22.     height: 90%; 
  23.     /**border:9px  solid  #ccff6a;**/ 
  24.     margin-left: 20px; 
  25.     display: flex; 
  26.     flex-direction: column; 
  27.     justify-content: center; 
  28.     align-items: center; 
  29. } 
  30. .menutitle{ 
  31.     color: black; 
  32.     font-weight: bold; 
  33.     letter-spacing: 4px; 
  34. } 
  35. .cimg{ 
  36.     width: 40px; 
  37.     height: 40px; 
  38. } 
  39. .swiperview{ 
  40.     width: 100%; 
  41.     height: 100%; 
  42. } 
  43. .sw1{ 
  44.     width: 100%; 
  45.     height: 100%; 
  46.     display: flex; 
  47.     flex-direction: column; 
  48. } 
  49. .sw2{ 
  50.     width: 100%; 
  51.     height: 100%; 
  52.     background-color: cornflowerblue; 
  53. } 
  54. .sw3{ 
  55.     width: 100%; 
  56.     height: 100%; 
  57.     background-color: #ccff6a; 
  58. } 
  59. .sw4{ 
  60.     width: 100%; 
  61.     height: 100%; 
  62.     background-color: #009865; 
  63. } 
  64. .swiper1 { 
  65.  
  66.     width: 100%; 
  67.     height: 330px; 
  68.     border: 1px solid #000000; 
  69.     indicator-color: #cf2411; 
  70.     indicator-size: 14px; 
  71.     indicator-bottom: 20px; 
  72.     indicator-right: 30px; 
  73.     margin-top: 100px; 
  74. } 
  75. .swiperContent1 { 
  76.     width: 800px; 
  77.     height: 100%; 
  78.     justify-content: center; 
  79. } 
  80. .button { 
  81.     width: 70%; 
  82.     margin: 10px; 
  83. } 
  84. .text { 
  85.     font-size: 40px; 
  86. } 
  87. .swiper2{ 
  88.     width: 100%; 
  89.     height: 100px; 
  90.     background-color: powderblue; 
  91. } 
  92. .lineview{ 
  93.     width: 100%; 
  94.     height: 100%; 
  95. } 
  96. .todo-wraper { 
  97.     width: 100%; 
  98.     height: 100%; 
  99. } 
  100. .todo-item { 
  101.     width: 100%; 
  102.     height: 80px; 
  103.     flex-direction: row; 
  104.     display: flex; 
  105. } 
  106. .todo-title { 
  107.     width: 454px; 
  108.     height: 40px; 
  109.     text-align: center; 
  110. } 
  111. .tabs { 
  112.     width: 100%; 
  113. } 
  114. .tab-bar { 
  115.     margin: 10px; 
  116.     height: 60px; 
  117.     border-color: #007dff; 
  118.     border-width: 1px; 
  119. } 
  120. .tab-text { 
  121.     width: 300px; 
  122.     text-align: center; 
  123. } 
  124. .tabcontent { 
  125.     width: 100%; 
  126.     height: 80%; 
  127.     justify-content: center; 
  128. } 
  129. .item-content { 
  130.     height: 100%; 
  131.     justify-content: center; 
  132.     display: flex; 
  133.     flex-direction: column; 
  134.  
  135.  
  136. } 
  137. .item-title { 
  138.     font-size: 60px; 
  139. } 
  140. .currentview{ 
  141.     width: 100%; 
  142.     height: 30%; 
  143.     border-bottom: 4px  solid  peru; 
  144.     display: flex; 
  145. } 
  146. .nextview{ 
  147.     width: 100%; 
  148.     height: 70%; 
  149. } 
  150. .leftview{ 
  151.     width: 30%; 
  152.     height: 100%; 
  153.     border-right: 2px  solid  paleturquoise; 
  154.     border-bottom: 2px  solid  paleturquoise; 
  155.     display: flex; 
  156.     justify-content: center; 
  157.     align-items: center; 
  158. } 
  159. .rightview1{ 
  160.     width: 70%; 
  161.     height: 100%; 
  162.     display: flex; 
  163.     flex-direction: column; 
  164. } 
  165. .infot1{ 
  166.     font-family: 楷體; 
  167.     font-size: 80px; 
  168.     color: snow; 
  169.     font-weight: bold; 
  170.     letter-spacing: 5px; 
  171. } 
  172. .cell{ 
  173.     width: 100%; 
  174.     height: 30%; 
  175.     border:1px  solid  red; 
  176. } 

 ©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任.

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)
相關(guān)推薦

2021-01-26 09:50:06

鴻蒙HarmonyOS遠(yuǎn)程調(diào)用

2021-01-28 14:34:35

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2009-06-19 08:29:36

Windows 7微軟操作系統(tǒng)

2021-01-21 12:04:05

Windows 10UI界面微軟

2021-02-22 14:56:55

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2012-03-07 15:13:07

PhoneGapmenu菜單

2021-01-08 09:55:17

鴻蒙HarmonyOS組裝列表

2021-08-05 15:06:30

鴻蒙HarmonyOS應(yīng)用

2020-11-11 11:56:05

HarmonyOS

2021-02-04 09:45:19

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2014-04-08 17:35:24

iOS 7彈簧式列表

2009-07-15 13:31:51

Swing菜單和菜單項(xiàng)

2009-11-10 09:00:50

2009-04-15 08:54:19

Windows 7微軟操作系統(tǒng)

2011-04-22 19:29:57

Windows Emb嵌入式開(kāi)發(fā)

2009-04-23 08:59:37

Windows 7微軟操作系統(tǒng)

2020-11-11 12:13:59

JS

2009-09-24 08:28:21

Windows 7新功能任務(wù)欄

2012-05-14 10:33:43

Coding4Fun

2009-12-11 09:07:59

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)