鴻蒙js開發7 鴻蒙分組列表和彈出menu選單

HarmonyOS技術社群發表於2021-02-23

鴻蒙入門指南，小白速來！從萌新到高手，怎樣快速掌握鴻蒙開發？【課程入口】

目錄：
1.鴻蒙檢視效果
2.js業務資料和事件
3.頁面檢視程式碼
4.跳轉頁面後的檢視層
5.js業務邏輯部分
6.《鴻蒙js開發》系列文章合集

任正非：現在華為必須全面靠自己打造產品，要敢於將鴻蒙推入競爭，星光不問趕路人,時光不負有心人

1.鴻蒙檢視效果

#2020徵文-手機#鴻蒙js開發7 鴻蒙分組列表和彈出menu選單

點選menu選單一項，跳轉頁面，底部選單欄和輪播佈局和輪播圖

#2020徵文-手機#鴻蒙js開發7 鴻蒙分組列表和彈出menu選單

2.js業務資料和事件

import prompt from '@system.prompt';
import router from '@system.router';
export default {
    data: {
        title: 'World',
        fundatas:[{"fathermenu":"員工管理","childmenu":[{"icon":"/common/emp.png","text":"查詢員工"},{"icon":"/common/emp.png","text":"新增員工"},{"icon":"/common/emp.png","text":"刪除員工"},{"icon":"/common/emp.png","text":"更新員工"}]},
                  {"fathermenu":"客戶服務","childmenu":[{"icon":"/common/customer.png","text":"一卡通兌"},{"icon":"/common/customer.png","text":"銀聯服務"},{"icon":"/common/customer.png","text":"票據業務"}]},
                  {"fathermenu":"內部管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},
                  {"fathermenu":"合同管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},
                  {"fathermenu":"資產管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},
                  {"fathermenu":"績效管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},
        ]
    },
    clickitem(itemvalue)
    {

        if(itemvalue=="查詢員工")
        {
            this.$element("menu").show({
                x: 360,
                y: 120
            });
            //this.$element("menu").show();

        }
        prompt.showToast({
            message:"點選了選單"+itemvalue

        })
    },
    menuSelected(e) {
        prompt.showToast({
            message:"你選擇查詢的值是:"+e.value
        })

        router.push({
            uri:"pages/index/index"

        })


    }
}

3.頁面檢視程式碼

<div class="container">
    
    <list  class="listview">
       <block  for="{{fundatas}}">
           <list-item-group  class="groupview">
               <list-item class="listitem">
                   <text  class="tv1">{{$item.fathermenu}}</text>
               </list-item>
               <block  for="{{ (index,value)  in $item.childmenu}}">
                 <list-item class="listitemone" onclick="clickitem({{value.text}})">
                    <image  class="cimg"  src="{{value.icon}}"></image>
                    <text class="tv2">{{value.text}}</text>
                 </list-item>
               </block>
           </list-item-group>
       
       </block>
    
    
    </list>


    <menu id="menu"  title="員工性別"  onselected="menuSelected">
        <option value="男性員工">
            男性員工
        </option>
        <option value="女性員工">
            女性員工
        </option>

    </menu>
</div>

3.樣式程式碼

.container {
    width: 100%;
    height: 1200px;
}
.listview{
    width: 100%;
    height: 100%;
}
.groupview{
    width: 100%;
    height: 46%;
    border-bottom: 5px solid  #DCDCDC;
}
.listitem{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-around;
}
.listitemone {
    width: 50%;
    height: 6%;
    border-bottom: 1px  solid  #DCDCDC;
    display: flex;
    justify-content: space-around;
}

.cimg{
    width: 40px;
    height: 40px;
}
.tv1{
    font-size: 35px;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 10px;
}
.tv2{
    font-size: 34px;
    font-weight: bold;
    font-family: sans-serif;
}

4.跳轉頁面後的檢視層

<div  class="pageview">
    <swiper  class="swiperview"   id="swiper" index="0" >
        <div class ="sw1">
            <swiper class="swiper1" id="swiper1" autoplay="true" index="0" indicator="true"  loop="true" digital="false">
                <div class = "swiperContent1" >
                    <text class = "text" value="輪播圖1"></text>
                </div>
                <div class = "swiperContent1">
                    <text class = "text" value="輪播圖2"></text>
                </div>
                <div class = "swiperContent1">
                    <text class = "text" value="輪播圖3"></text>
                </div>
            </swiper>

            <swiper class="swiper2" loop="true" vertical="true" indicator="false" autoplay="true">
                     <div class="lineview">
                       <text>1.鴻蒙</text>
                     </div>
                     <div class="lineview">
                         <text>2.蘋果</text>
                     </div>
                     <div class="lineview">
                         <text>3.安卓</text>
                     </div>
            </swiper>
        </div>

        <div class ="sw2">
            <list class="todo-wraper">
                <list-item for="{{todolist}}" class="todo-item">
                    <text class="todo-title">{{$item.title}}</text>
                    <text class="todo-title">{{$item.date}}</text>
                </list-item>
            </list>
        </div>
        <div class ="sw3">
            <tabs class = "tabs" index="0" vertical="false" onchange="change">
                <tab-bar class="tab-bar" mode="fixed">
                    <text class="tab-text">推薦</text>
                    <text class="tab-text">視訊</text>
                    <text class="tab-text">本地</text>
                    <text class="tab-text">內容</text>
                </tab-bar>
                <tab-content class="tabcontent" scrollable="true">
                    <div class="item-content" >
                        <div class="currentview">
                                <div  class="leftview"><text class="infot1">{{weatherInfo.city}}</text></div>
                                 <div class="rightview1">
                                    <div  class="cell"><text>{{winfo.info}}</text></div>
                                     <div class="cell"><text>{{winfo.direct}}</text></div>
                                     <div class="cell"><text>{{winfo.power}}</text></div>
                                 </div>

                        </div>
                        <div class="nextview">


                        </div>

                    </div>
                    <div class="item-content" >
                        <text class="item-title">第二個</text>
                    </div>
                    <div class="item-content" >
                        <text class="item-title">第三個</text>
                    </div>
                    <div class="item-content" >
                        <text class="item-title">第四個</text>
                    </div>
                </tab-content>
            </tabs>
        </div>

        <div class ="sw4">
            <text>第四幅</text>
        </div>

    </swiper>
    <div  class="bottommenu">
        <div  for="{{menus}}"  class="menubox"  onclick="changemenu({{$idx}})">
            <image  src="{{currentdata==$idx?$item.path:$item.path1}}" class="cimg"></image>
           <text  class="menutitle">{{$item.menu}}</text>
        </div>
    </div>
</div>

5.js業務邏輯部分

import   fetch  from '@system.fetch';
export default {
    data: {

        weatherInfo:{},
        winfo:{},
        nextInfo:[],
        currentdata:0,
        title: "",
        menus:[{menu:"首頁","path":"./common/ones.png","path1":"./common/oneu.png"},
               {menu:"分類","path":"./common/cs.png","path1":"./common/cu.png"},
               {menu:"內容","path":"./common/cons.png","path1":"./common/conu.png"},
               {menu:"我的","path":"./common/mys.png","path1":"./common/myu.png"}],
       todolist: [{
      title: '刷leetcode',
      date: '2020-06-25 10:00:00',
    }, {
      title: '看電影',
      date: '2020-06-27 20:00:00',
    },
                  {
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },{
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },{
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },
                  {
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },
                  {
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },{
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },{
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },{
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },
                  {
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },{
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  },{
                      title: '刷leetcode',
                      date: '2020-06-25 10:00:00',
                  }, {
                      title: '看電影',
                      date: '2020-06-27 20:00:00',
                  }

       ]
    },
    onInit() {
       // this.title = this.$t('strings.world');

        let  that  =this;
        fetch.fetch({
            url:"http://apis.juhe.cn/simpleWeather/query?city=南京&key=3dc98f3428c44424088015738a070554",
            responseType:"json",
            success:function(resp)
            {
                let  currentValue=JSON.parse(resp.data);
                that.weatherInfo=currentValue.result;
                that.winfo=currentValue.result.realtime;
               // that.nextInfo=currentValue.future;
            }

        })
    },
    changemenu(index)
    {
        this.currentdata=index;
        this.$element('swiper').swipeTo({index: index});

    }
}

5.樣式程式碼

.pageview{
    width: 100%;
    height: 1600px;
    background-color: azure;
}
.bottommenu{
    width: 100%;
    height: 140px;
    background-color: snow;
    border-top: 10px  solid  black;
    z-index:999;
    position: fixed;
    left: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menubox{

    width: 22%;
    height: 90%;
    /**border:9px  solid  #ccff6a;**/
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.menutitle{
    color: black;
    font-weight: bold;
    letter-spacing: 4px;
}
.cimg{
    width: 40px;
    height: 40px;
}
.swiperview{
    width: 100%;
    height: 100%;
}
.sw1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sw2{
    width: 100%;
    height: 100%;
    background-color: cornflowerblue;
}
.sw3{
    width: 100%;
    height: 100%;
    background-color: #ccff6a;
}
.sw4{
    width: 100%;
    height: 100%;
    background-color: #009865;
}
.swiper1 {

    width: 100%;
    height: 330px;
    border: 1px solid #000000;
    indicator-color: #cf2411;
    indicator-size: 14px;
    indicator-bottom: 20px;
    indicator-right: 30px;
    margin-top: 100px;
}
.swiperContent1 {
    width: 800px;
    height: 100%;
    justify-content: center;
}
.button {
    width: 70%;
    margin: 10px;
}
.text {
    font-size: 40px;
}
.swiper2{
    width: 100%;
    height: 100px;
    background-color: powderblue;
}
.lineview{
    width: 100%;
    height: 100%;
}
.todo-wraper {
    width: 100%;
    height: 100%;
}
.todo-item {
    width: 100%;
    height: 80px;
    flex-direction: row;
    display: flex;
}
.todo-title {
    width: 454px;
    height: 40px;
    text-align: center;
}
.tabs {
    width: 100%;
}
.tab-bar {
    margin: 10px;
    height: 60px;
    border-color: #007dff;
    border-width: 1px;
}
.tab-text {
    width: 300px;
    text-align: center;
}
.tabcontent {
    width: 100%;
    height: 80%;
    justify-content: center;
}
.item-content {
    height: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;


}
.item-title {
    font-size: 60px;
}
.currentview{
    width: 100%;
    height: 30%;
    border-bottom: 4px  solid  peru;
    display: flex;
}
.nextview{
    width: 100%;
    height: 70%;
}
.leftview{
    width: 30%;
    height: 100%;
    border-right: 2px  solid  paleturquoise;
    border-bottom: 2px  solid  paleturquoise;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rightview1{
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.infot1{
    font-family: 楷體;
    font-size: 80px;
    color: snow;
    font-weight: bold;
    letter-spacing: 5px;
}
.cell{
    width: 100%;
    height: 30%;
    border:1px  solid  red;
}

作者：六合李欣

鴻蒙JS 開發整理
2022-04-03
鴻蒙JS
優酷鴻蒙開發實踐 | 鴻蒙卡片開發
2021-10-19
鴻蒙
鴻蒙HarmonyOS實戰-ArkUI元件（Menu）
2024-04-11
鴻蒙UI元件
鴻蒙系統中的 JS 開發框架
2020-09-14
鴻蒙JS框架
使用Taro開發鴻蒙原生應用——快速上手，鴻蒙應用開發指南
2024-02-08
鴻蒙
使用 Taro 開發鴻蒙原生應用 —— 快速上手，鴻蒙應用開發指南
2024-01-17
鴻蒙
自學鴻蒙應用開發（17）- TabList和Tab
2021-05-07
鴻蒙
鴻蒙系統系列教程5-鴻蒙開發環境的搭建
2021-07-09
鴻蒙開發環境
鴻蒙開發TypeScript語言：【Number】
2024-04-19
鴻蒙TypeScript
鴻蒙的js開發部模式18：鴻蒙的檔案上傳到python伺服器端
2021-03-03
鴻蒙JS模式Python伺服器
鴻蒙系統應用開發之JS實現一個簡單的List
2020-11-13
鴻蒙JS
鴻蒙OS 2.0應用開發初潮
2020-09-26
鴻蒙
鴻蒙開發TypeScript語言：【迴圈】
2024-04-17
鴻蒙TypeScript
鴻蒙開發TypeScript語言：【函式】
2024-04-18
鴻蒙TypeScript函式
鴻蒙的js開發模式19：鴻蒙手機下載python伺服器端檔案的實現
2021-03-04
鴻蒙JS模式Python伺服器
從微信小程式到鴻蒙js開發【08】——表單元件&註冊登入模組
2021-02-21
微信小程式鴻蒙JS元件
雷霆遊戲加入鴻蒙“朋友圈”，《問道》手遊啟動鴻蒙原生應用開發
2024-01-31
遊戲鴻蒙
鴻蒙開發學習（一）之ArkTS
2023-11-15
鴻蒙
鴻蒙系統應用基礎開發
2024-04-26
鴻蒙
鴻蒙系統應用開發之開發準備
2023-01-13
鴻蒙
3.5鴻蒙
2024-03-06
鴻蒙
鴻蒙系統系列教程1-鴻蒙系統的發展史
2021-07-05
鴻蒙
《三國殺》完成鴻蒙原生應用開發，更多遊戲品類加入鴻蒙生態
2023-12-04
鴻蒙遊戲
第一次嘗試鴻蒙開發
2024-02-07
鴻蒙
鴻蒙HarmonyOS實戰-ArkUI動畫（彈簧曲線動畫）
2024-04-22
鴻蒙UI動畫
【全網首發】鴻蒙開源三方元件--強大的彈窗庫XPopup元件
2021-04-28
鴻蒙元件
鴻蒙系統和安卓的區別鴻蒙系統是基於安卓嗎
2021-06-04
鴻蒙安卓
Android開發之Menu：OptionMenu(選項選單)、ContextMenu(上下文選單)、SubMenu(子選單)
2015-11-20
AndroidContext
優酷鴻蒙開發實踐｜多屏互動開發實踐
2021-11-02
鴻蒙
鴻蒙 Android iOS 應用開發對比02
2021-06-04
鴻蒙AndroidiOS
鴻蒙原生應用開發——分散式資料物件
2023-12-08
鴻蒙分散式物件
鴻蒙開發實戰：【系統服務框架部件】
2024-04-23
鴻蒙框架
鴻蒙 OS 程式碼正式開源！！
2020-09-11
鴻蒙
不止 5G 和鴻蒙，華為最新大招，扔出 AI 計算核彈
2020-04-04
鴻蒙AI
華為鴻蒙進一步開啟海外市場！歐洲官宣“鴻蒙”新系統！
2021-12-22
鴻蒙
左鍵彈出選單
2007-10-16
【鴻蒙千帆起】《開心消消樂》完成鴻蒙原生應用開發，創新多端聯動使用者體驗
2024-01-03
鴻蒙
Taro 3.5 canary 釋出：支援適配鴻蒙
2021-12-09
鴻蒙

鴻蒙js開發7 鴻蒙分組列表和彈出menu選單

相關文章