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

作者：六合李欣 2021-01-27 13:26:21

開發(fā)

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

[[378755]]

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

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

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

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

1.鴻蒙視圖效果

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

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

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":"客戶服務(wù)","childmenu":[{"icon":"/common/customer.png","text":"一卡通兌"},{"icon":"/common/customer.png","text":"銀聯(lián)服務(wù)"},{"icon":"/common/customer.png","text":"票據(jù)業(yè)務(wù)"}]}, 
                  {"fathermenu":"內(nèi)部管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]}, 
                  {"fathermenu":"合同管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]}, 
                  {"fathermenu":"資產(chǎn)管理","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:"點(diǎn)擊了菜單"+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>

4.樣式代碼

.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; 
}

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

<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">內(nèi)容</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">第二個(gè)</text> 
                    </div> 
                    <div class="item-content" > 
                        <text class="item-title">第三個(gè)</text> 
                    </div> 
                    <div class="item-content" > 
                        <text class="item-title">第四個(gè)</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>

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

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:"內(nèi)容","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}); 
 
    } 
}

7.樣式代碼

.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; 
}