鸿蒙页面菜单的选择
主要界面截图
所有未显示的代码均在前面发的文档中可找到
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代码
搜索 search.js代码
export default{ props:['from']}
cookbook-category.json代码，其余两个在之前博客有
{ "data": { "category": { "热门": ["饮品", "清淡", "夏季菜谱", "下饭菜", "面食", "粥", "晚餐", "汤", "面条", "汤圆", "烤箱", "中餐", "西餐", "早餐", "蛋糕", "东北菜", "凉拌", "煲汤", "布丁", "寿司", "糕点", "糖水", "湘菜", "甜点"], "菜式": ["家常菜", "素菜", "凉菜", "下饭菜", "面试", "小吃", "粥", "汤"], "菜系": ["川菜", "东北菜", "粤菜", "湘菜", "西餐", "鲁菜", "韩式料理", "日式料理"], "特色": ["泡菜", "冰淇淋", "粽子", "沙拉", "油条", "豆浆", "零食", "布丁"], "烘焙": ["蛋糕", "披萨", "面包", "月饼", "吐司", "饼干", "杯子蛋糕", "蛋挞"], "主食": ["寿司", "饼", "炒饭", "馒头", "饺子", "炒面"], "器具": ["烤箱", "炒锅", "微波炉"], "烹饪方式": ["烘焙", "拌", "火锅", "蒸", "煮", "卤"], "口味": ["清淡", "咖喱", "麻辣", "香辣", "煮", "卤"], "场合": ["早餐", "晚餐", "中餐", "下午茶", "宵夜", "熬夜餐", "春季菜谱"], "节日": ["春节", "年夜饭", "中秋节", "元旦"] }, "material": { "肉类": ["猪肉", "排骨", "猪蹄", "牛肉"], "蛋/奶": ["鸡蛋", "鸭蛋", "鹌鹑蛋", "咸鸭蛋", "松花蛋"], "鱼类": ["章鱼", "鲤鱼", "鲫鱼"], "水产": ["虾", "虾米", "龙虾", "河虾"], "蔬菜": ["白菜", "油菜", "芹菜", "菠菜", "茼蒿"], "豆类": ["绿豆芽", "黄豆芽", "黄豆"], "果品类": ["苹果", "香蕉"], "五谷杂粮": ["芥麦面", "麦芽", "小米"], "药食": ["燕窝", "人参"] } }}
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代码
<!-- 关于我们 --> index.js代码
export default { data: { title: "" }, onInit() { this.title = this.$t('strings.world'); }}
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代码
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代码
分类 食材 from="cate" <!-- 信息页面 {{num}} 父组件slot内容 -->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-nocheckimport 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 }}
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代码
<!-- 个人中心 --> 个人中心 是否滑动切换 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){ }}
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代码
美食大全 <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> index.js代码
// @ts-nocheckimport 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" } ]更改此部分代码为截图所示 
"deviceConfig": { "default": { "network": { "cleartextTraffic": true } } }, 
高性能云服务器 
精品线路独享带宽，毫秒延迟，年中盛惠 1 折起