当前位置：网站首页>鸿蒙页面菜单的选择
鸿蒙页面菜单的选择
2022-06-25 06:38:00 【respectable-face】
主要界面截图
所有未显示的代码均在前面发的文档中可找到
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": {
"肉类": ["猪肉", "排骨", "猪蹄", "牛肉"],
"蛋/奶": ["鸡蛋", "鸭蛋", "鹌鹑蛋", "咸鸭蛋", "松花蛋"],
"鱼类": ["章鱼", "鲤鱼", "鲫鱼"],
"水产": ["虾", "虾米", "龙虾", "河虾"],
"蔬菜": ["白菜", "油菜", "芹菜", "菠菜", "茼蒿"],
"豆类": ["绿豆芽", "黄豆芽", "黄豆"],
"果品类": ["苹果", "香蕉"],
"五谷杂粮": ["芥麦面", "麦芽", "小米"],
"药食": ["燕窝", "人参"]
}
}
}
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">
<!-- <text class="title">
关于我们
</text>-->
<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');
}
}
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>
<!--<div>
<text>
信息页面
</text>
<text>{
{num}}</text>
<child @change-father-num="changeNum">
<text>父组件slot内容</text>
<text slot="other"></text>
</child>
<comp index="0"></comp>
</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
}
}
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="container">
<text class="title">
个人中心
</text>
<comp index="3"></comp>
</div>-->
<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){
}
}
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" ><!--scrollable="{
{pageScrollable}}"-->
<div class="cb-title">
<text>
美食大全
</text>
</div>
<div class="cb-body">
<list>
<list-item class="cb-body-item">
<!-- <cb-hotcake></cb-hotcake>-->
<cb-swiper list="{
{list}}"></cb-swiper>
<!-- <cb-hotcake></cb-hotcake>-->
</list-item>
</list>
</div>
<div class="cb-body">
<list>
<list-item class="cb-body-item">
<!-- <cb-hotcake></cb-hotcake>-->
<cb-search from="index"></cb-search>
<!-- <cb-hotcake></cb-hotcake>-->
</list-item>
</list>
</div>
<div class="cb-body">
<list>
<list-item class="cb-body-item">
<cb-hotcake></cb-hotcake>
<!-- <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"
}
]更改此部分代码为截图所示 
"deviceConfig": {
"default": {
"network": {
"cleartextTraffic": true
}
}
},边栏推荐
- Why did Yanjing Beer come here?
- 网络是怎样连接的？
- lotus v1.16.0-rc2 Calibration-net
- 活动报名｜Apache Pulsar x KubeSphere 在线 Meetup 火热报名中
- Escape analysis of 982 golang
- [he doesn't mention love, but every word is love]
- Love Terminator
- StreamNative Platform 1.5 版本发布，集成 Istio、支持 OpenShift 部署
- 5g private network market is in full swing, and it is crucial to solve deployment difficulties in 2022
- 48 张图 | 手摸手教你微服务的性能监控、压测和调优
猜你喜欢
基於 KubeSphere 的分級管理實踐
The significance and proof of weak large number theorem
Debug through yalc before releasing NPM package
基于 KubeSphere 的分级管理实践
Finally, when you open source the applet ~
Rotation vector (rotation matrix) and Euler angle
CTFHub-Web-信息泄露-目錄遍曆
![Analysis on the trend of the number of national cinemas, film viewers and average ticket prices in 2021 [figure]](/img/01/594990789cbc1817dbbf61b7dd0c4c.jpg)
Analysis on the trend of the number of national cinemas, film viewers and average ticket prices in 2021 [figure]
Capable people never complain about the environment!
What is the real future of hardware engineers?
随机推荐
Is it possible to use Jasmine's toHaveBeenCalledWith matcher with a regular expression?
48 张图 | 手摸手教你微服务的性能监控、压测和调优
Kubernetes cluster dashboard & kuboard installation demo
Who can teach me how to learn SCM, what to learn first and how to get started?
分布式锁中的王者方案 - Redisson
Common cluster scripts
Streamnational platform version 1.5 is released, integrating istio and supporting openshift deployment
Rotation vector (rotation matrix) and Euler angle
[2022 dark horse programmer] SQL optimization
Omni toolbox direct download
终于等到你，小程序开源啦～
[acnoi2022] the structure of President Wang
Want to self-study SCM, do you have any books and boards worth recommending?
[Shangshui Shuo series] day 5
Three laws of go reflection
Escape analysis of 982 golang
Direct select sort and quick sort
Cloning and importing DOM nodes
One year's time and University experience sharing with CSDN
[learn FPGA programming from scratch -43]: vision chapter - technology evolution of chip design in the post Moore era -2- evolution direction