鸿蒙os实现菜单选择

最新推荐文章于 2024-05-20 15:06:11 发布

TA像未融化的糖

最新推荐文章于 2024-05-20 15:06:11 发布

阅读量275

点赞数

文章标签：鸿蒙

本文链接：https://blog.csdn.net/weixin_52046806/article/details/125436378

版权

search.css代码

.search-container {
padding: 10px 15px;
}

.search-input {
height: 40px;
width: 100%;
justify-content: center;
align-items: center;
border-radius: 6px;
border: 0.5px solid #ee742f;
}

.search-input-image {
width: 20px;
height: 20px;
}

.search-input-text {
font-size: 12px;
font-weight: 100;
}

.index-inner-bg {
background-color: #fff;
}

.cate-inner-bg {
background-color: #f2f2f2;
border-width: 0;
}

.index-outer-bg {
background-color: #f2f2f2;
}

.cate-outer-bg {
background-color: #fff;
}

search.hml代码

<div class="search-container {{from==='cate' ?'cate-outer-bg':'index-outer-bg'}}">
<div class="search-input {{from==='cate' ?'cate-inner-bg':'index-inner-bg'}}">
<image src="/common/images/search.png"></image>
<text>搜索</text>
</div>
</div>
search.js代码

export default{
props:['from']
}

cookbook-category.json代码，其余两个在之前博客有

{
"data": {
"category": {
"热门": ["饮品", "清淡", "夏季菜谱", "下饭菜", "面食", "粥", "晚餐", "汤", "面条", "汤圆", "烤箱", "中餐", "西餐", "早餐", "蛋糕", "东北菜", "凉拌", "煲汤", "布丁", "寿司", "糕点", "糖水", "湘菜", "甜点"],
"菜式": ["家常菜", "素菜", "凉菜", "下饭菜", "面试", "小吃", "粥", "汤"],
"菜系": ["川菜", "东北菜", "粤菜", "湘菜", "西餐", "鲁菜", "韩式料理", "日式料理"],
"特色": ["泡菜", "冰淇淋", "粽子", "沙拉", "油条", "豆浆", "零食", "布丁"],
"烘焙": ["蛋糕", "披萨", "面包", "月饼", "吐司", "饼干", "杯子蛋糕", "蛋挞"],
"主食": ["寿司", "饼", "炒饭", "馒头", "饺子", "炒面"],
"器具": ["烤箱", "炒锅", "微波炉"],
"烹饪方式": ["烘焙", "拌", "火锅", "蒸", "煮", "卤"],
"口味": ["清淡", "咖喱", "麻辣", "香辣", "煮", "卤"],
"场合": ["早餐", "晚餐", "中餐", "下午茶", "宵夜", "熬夜餐", "春季菜谱"],
"节日": ["春节", "年夜饭", "中秋节", "元旦"]
},
"material": {
"肉类": ["猪肉", "排骨", "猪蹄", "牛肉"],
"蛋/奶": ["鸡蛋", "鸭蛋", "鹌鹑蛋", "咸鸭蛋", "松花蛋"],
"鱼类": ["章鱼", "鲤鱼", "鲫鱼"],
"水产": ["虾", "虾米", "龙虾", "河虾"],
"蔬菜": ["白菜", "油菜", "芹菜", "菠菜", "茼蒿"],
"豆类": ["绿豆芽", "黄豆芽", "黄豆"],
"果品类": ["苹果", "香蕉"],
"五谷杂粮": ["芥麦面", "麦芽", "小米"],
"药食": ["燕窝", "人参"]
}
}
}

about

index.css代码

.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.title {
font-size: 40px;
color: #000000;
opacity: 0.9;
}

@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}

@media screen and (device-type: wearable) {
.title {
font-size: 28px;
color: #FFFFFF;
}
}

@media screen and (device-type: tv) {
.container {
background-image: url("/common/images/Wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.title {
font-size: 100px;
color: #FFFFFF;
}
}

@media screen and (device-type: phone) and (orientation: landscape) {
.title {
font-size: 60px;
}
}
index.hml代码

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">

<div>
<web src="https://map.baidu.com/search/%E5%A4%A9%E5%AE%89%E9%97%A8/@12957695.78455178,4825339.25645,17.33z?querytype=s&da_src=shareurl&wd=%E5%A4%A9%E5%AE%89%E9%97%A8&c=153&src=0&wd2=%E5%8C%97%E4%BA%AC%E5%B8%82%E4%B8%9C%E5%9F%8E%E5%8C%BA&pn=0&sug=1&l=12&b=(12469977.85,4064032.61;12568281.85,4112864.61)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&sug_forward=65e1ee886c885190f60e77ff&device_ratio=2"></web>
</div>
<comp index="2"></comp>
</div>
index.js代码

export default {
data: {
title: ""
},
onInit() {
this.title = this.$t('strings.world');
}
}

index

menu.css代码

.menu-container {
flex: 1;
border-top: 0.5px solid #CCC;
}

.menu-tab {
width: 100px;
background-color: #f3f3f3;
flex-direction: column;
}

.menu-tab-item {
height: 34px;
justify-content: center;
align-items: center;
width: 100px;
}

.menu-tab-item-text {
font-size: 12px;
font-weight: 100;
height: 100%;
/* align-content: stretch;*/
}

.menu-tab-item-normal {
background-color: #f3f3f3;
}

.menu-tab-item-text-normal {
/* font-size: 12px;*/
/* font-weight: 100;*/
/* height: 100%;*/
/* align-content: stretch;*/
color: #000;
border-bottom: 0;
}

.menu-tab-item-active {
background-color: #FFF;
}

.menu-tab-item-text-active {
font-size: 12px;
font-weight: 100;
height: 100%;
/* align-content: stretch;*/
/* color: #ee742f;*/
/* border-bottom: 2px solid #ee742f;*/
}

.menu-list {
flex: 1;
flex-wrap: wrap;
}

.menu-list-item {
width: 33.333333%;
height: 40px;
justify-content: center;
align-items: center;
}

.menu-list-item-text {
font-size: 12px;
font-weight: bold;
}

menu.hml代码

<div class="menu-container">
<div class="menu-tab">
<div class="menu-tab-item {{ $item === currentTab ?'active' :'normal' }}"
for="{{tabs}}"
@click="handleTabClick($item)"
>
<text>
{{$item}}
</text>
</div>

</div>
<div class="menu-list">
<div class="menu-list-item" for="{{lists}}">
<text>
<span>{{ $item }}</span>
</text>
</div>
</div>
</div>
menu.js代码

export default{
props: ['menuData','firstItem'],
data(){
return{
currentTab: this.firstItem
}
},
computed:{
tabs(){
return Object.keys(this.menuData)
},
lists(){
return this.menuData[this.currentTab]
}
},
handleTabClick(currentTab){
this.currentTab=currentTab
},
onReady(){
this.$watch('firstItem',(newValue)=>{
this.currentTab=newValue
})
}
}
index.hml代码

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<element src='../../components/child/child.hml'></element>
<element src='../index/menu/menu.hml' name="cb-menu"></element>
<element name="cb-search" src="../../common/components/components/search/search.hml"></element>
<div class="cate-container">
<div class="cate-header">
<div class="cate-header-nav">
<div class="cate-header-nav-item" @click="handleSliderClick('category')">
<text>
分类
</text>
</div>
<div class="cate-header-nav-item" @click="handleSliderClick('material')">
<text>
食材
</text>
</div>
<div if="{{type==='category'}}" class="cate-header-nav-slider">
<text>
分类
</text>
</div>
<div else class="cate-header-nav-slider move">
<text>
食材
</text>
</div>
</div>
</div>
<div>
<cb-search> from="cate"</cb-search>
</div>
<div>
<cb-menu menu-data="{{filteredMenuData}}"first-item="{{type==='category' ? '热门':'肉类'}}"></cb-menu>
</div>

<div>
<comp index="0"></comp>
</div>
</div>


index.css代码

.cate-container {
flex-direction: column;
}

.cate-header {
width: 100%;
height: 44px;
background-color: #ee742f;
justify-content: center;
align-items: center;
}

.cate-header-nav {
width: 140px;
height: 30px;
border-radius: 30px;
border: 0.5px solid #FFF;
position: relative;
z-index: 1;
}

.cate-header-nav-item {
flex: 1;
justify-content: center;
align-items: center;
height: 30px;
}

.item-text {
font-size: 12px;
color: #FFF;
}

.cate-header-nav-slider {
position: absolute;
left: 0;
border-radius: 30px;
width: 70px;
height: 30px;
background-color: #FFF;
z-index: 0;
justify-content: center;
align-items: center;
transition: left 200ms ease-in;
}

.slider-text {
font-size: 12px;
color: #ee742f;
}

.move {
left: 70px;
}

index.js代码

// @ts-nocheck
import menuData from '../../common/data/cookbook-category.json'
export default {
data: {
type:'category',
menuData:[]
},
handleSliderClick(type){
this.type=type
},
computed:{
filteredMenuData(){
return this.menuData[this.type]
}

},
onInit(){
this.menuData=menuData.data
}
}

me

index.css代码

/*@import "../../../common/scss/title.scss";*/

.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.title {
font-size: 40px;
color: #000000;
opacity: 0.9;
}

@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}

@media screen and (device-type: wearable) {
.title {
font-size: 28px;
color: #FFFFFF;
}
}

@media screen and (device-type: tv) {
.container {
background-image: url("/common/images/Wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.title {
font-size: 100px;
color: #FFFFFF;
}
}

@media screen and (device-type: phone) and (orientation: landscape) {
.title {
font-size: 60px;
}
}

.more-container {
flex-direction: column;
}

/*.cb-title {*/
/* @extent %cb-title;*/
/*}*/

.cb-title {
width: 100%;
height: 44px;
background-color: #ee742f;
justify-content: center;
align-items: center;
}

.cb-title-text {
font-size: 16px;
font-weight: normal;
color: #FFF;
}

.camera-container {
width: 100%;
height: 270px;
flex-direction: column;
align-content: center;
justify-content: center;
}

.camera {
width: 100%;
height: 240px;;
}

.btn-takePhoto {
width: 90%;
height: 30px;
align-self: center;
}

.switch-container {
padding-left: 20px;
}

.switch-container-text {
font-size: 12px;
}

.image_camera {
margin-top: 10px;
width: 100%;
object-fit: contain;
height: 400px;
}

index.hml代码

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>


<div class="more-container">
<div div="cb-title">
<text>个人中心</text>
</div>
<div class="camera-container">
<camera class="camera" ref="camera"></camera>
<div>
<text>

</text>
</div>
<button @click="handleClick" class="btn-takePhoto">
拍照
</button>
</div>
<div class="switch-container">
<text>
是否滑动切换
</text>
<switch checked="{{checked}}" @chenge="handleChange"></switch>
</div>
<comp index="3"></comp>
</div>
index.js代码

/*export default {
data: {
title: ""
},
onInit() {
this.title = this.$t('strings.world');
}
}*/
export default{
data:{
photoUri:'',
checked:true
},

handleClick(){
this.$refs.camera.takePhoto({
success(uri){
this.photoUri=uri
},
fail(error){

}
})
},
handleChange(obj){

}
}

news

index.css代码

.cb-container {
flex-direction: column;
}

.cb-title {
width: 100%;
height: 44px;
justify-content: center;
align-items: center;
background-color: #00ff00;
}

text {
color: white;
font-size: 16px;
font-weight: normal;
}

.cb-body {
flex: 1;
}

.cb-body-item {
flex-direction: column;
}

index.hml代码

<element name='cb-hotcake' src='./hotcake/hotcake'></element>
<element name='cb-swiper' src='./swiper/swiper.hml'></element>
<element name='cb-top' src='./top/top.hml'></element>
<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<element name="cb-search" src="../../common/components/components/search/search.hml"></element>
<div class="cb-container" >
<div class="cb-title">
<text>
美食大全
</text>
</div>
<div class="cb-body">
<list>
<list-item class="cb-body-item">

<cb-swiper list="{{list}}"></cb-swiper>


</list-item>
</list>
</div>

<div class="cb-body">
<list>
<list-item class="cb-body-item">

<cb-search from="index"></cb-search>


</list-item>
</list>
</div>

<div class="cb-body">
<list>
<list-item class="cb-body-item">
<cb-hotcake></cb-hotcake>


</list-item>
</list>
</div>

<div class="cb-body">
<list>
<list-item class="cb-body-item">
<cb-top list="{{list}}"></cb-top>

</list-item>
</list>
<comp index="1"></comp>
</div>

</div>
index.js代码

// @ts-nocheck

import list from '../../common/data/cookbook-list.json'
import fetch from '@system.fetch';
export default {
data: {
list:[]
// title: ""
},

onInit() {
this.list=list.data;
// this.title = this.$t('strings.world');
/* currentSelected:0,
pageScrollable:true*/
fetch.fetch({
url:'http://securit.qfjava.cn/hm/cookbook-list.json',
responseType:'json',
success:res=>{
const result=JSON.parse(res.data)
this.list=result.data
}
})
}
}

config.json更改添加部分代码

此部分与js同级添加此部分代码

"reqPermissions": [
{
"name": "ohos.permission.GET_NETWORK_INFO"
},
{
"name": "ohos.permission.SET_NETWORK_INFO"
},
{
"name": "ohos.permission.INTERNET"
},
{
"name": "ohos.permission.CAMERA"
}

]