devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙页面菜单的选择_鸿蒙backgroundimage

作者：Monodyee | 2024-03-13 11:00:56

赞

踩

鸿蒙backgroundimage

主要界面截图

 

所有未显示的代码均在前面发的文档中可找到

search.css代码

  1. .search-container {
  2.     padding: 10px 15px;
  3. }
  4.  
  5. .search-input {
  6.     height: 40px;
  7.     width: 100%;
  8.     justify-content: center;
  9.     align-items: center;
  10.     border-radius: 6px;
  11.     border: 0.5px solid #ee742f;
  12. }
  13.  
  14. .search-input-image {
  15.     width: 20px;
  16.     height: 20px;
  17. }
  18.  
  19. .search-input-text {
  20.     font-size: 12px;
  21.     font-weight: 100;
  22. }
  23.  
  24. .index-inner-bg {
  25.     background-color: #fff;
  26. }
  27.  
  28. .cate-inner-bg {
  29.     background-color: #f2f2f2;
  30.     border-width: 0;
  31. }
  32.  
  33. .index-outer-bg {
  34.     background-color: #f2f2f2;
  35. }
  36.  
  37. .cate-outer-bg {
  38.     background-color: #fff;
  39. }
  40.

 search.hml代码

  1. <div class="search-container {{from==='cate' ?'cate-outer-bg':'index-outer-bg'}}">
  2.     <div class="search-input {{from==='cate' ?'cate-inner-bg':'index-inner-bg'}}">
  3.         <image src="/common/images/search.png"></image>
  4.         <text>搜索</text>
  5.     </div>
  6. </div>

 search.js代码

  1. export default{
  2.     props:['from']
  3. }

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

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

index.css代码

  1. .container {
  2.     flex-direction: column;
  3.     justify-content: center;
  4.     align-items: center;
  5.     width: 100%;
  6.     height: 100%;
  7. }
  8.  
  9. .title {
  10.     font-size: 40px;
  11.     color: #000000;
  12.     opacity: 0.9;
  13. }
  14.  
  15. @media screen and (device-type: tablet) and (orientation: landscape) {
  16.     .title {
  17.         font-size: 100px;
  18.     }
  19. }
  20.  
  21. @media screen and (device-type: wearable) {
  22.     .title {
  23.         font-size: 28px;
  24.         color: #FFFFFF;
  25.     }
  26. }
  27.  
  28. @media screen and (device-type: tv) {
  29.     .container {
  30.         background-image: url("/common/images/Wallpaper.png");
  31.         background-size: cover;
  32.         background-repeat: no-repeat;
  33.         background-position: center;
  34.     }
  35.  
  36.     .title {
  37.         font-size: 100px;
  38.         color: #FFFFFF;
  39.     }
  40. }
  41.  
  42. @media screen and (device-type: phone) and (orientation: landscape) {
  43.     .title {
  44.         font-size: 60px;
  45.     }
  46. }

 index.hml代码

  1. <element name='comp' src='../../components/tabbar/tabbar.hml'></element>
  2. <div class="container">
  3.   <!--  <text class="title">
  4.        关于我们
  5.     </text>-->
  6.     <div>
  7.     <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>
  8.     </div>
  9.     <comp index="2"></comp>
  10. </div>

 index.js代码

  1. export default {
  2.     data: {
  3.         title: ""
  4.     },
  5.     onInit() {
  6.         this.title = this.$t('strings.world');
  7.     }
  8. }

menu.css代码

  1. .menu-container {
  2.     flex: 1;
  3.     border-top: 0.5px solid #CCC;
  4. }
  5.  
  6. .menu-tab {
  7.     width: 100px;
  8.     background-color: #f3f3f3;
  9.     flex-direction: column;
  10. }
  11.  
  12. .menu-tab-item {
  13.     height: 34px;
  14.     justify-content: center;
  15.     align-items: center;
  16.     width: 100px;
  17. }
  18.  
  19. .menu-tab-item-text {
  20.     font-size: 12px;
  21.     font-weight: 100;
  22.     height: 100%;
  23. /*    align-content: stretch;*/
  24. }
  25.  
  26. .menu-tab-item-normal {
  27.     background-color: #f3f3f3;
  28. }
  29.  
  30. .menu-tab-item-text-normal {
  31. /*    font-size: 12px;*/
  32. /*    font-weight: 100;*/
  33. /*    height: 100%;*/
  34. /*    align-content: stretch;*/
  35.     color: #000;
  36.     border-bottom: 0;
  37. }
  38.  
  39. .menu-tab-item-active {
  40.     background-color: #FFF;
  41. }
  42.  
  43. .menu-tab-item-text-active {
  44.     font-size: 12px;
  45.     font-weight: 100;
  46.     height: 100%;
  47. /*    align-content: stretch;*/
  48. /*    color: #ee742f;*/
  49. /*    border-bottom: 2px solid #ee742f;*/
  50. }
  51.  
  52. .menu-list {
  53.     flex: 1;
  54.     flex-wrap: wrap;
  55. }
  56.  
  57. .menu-list-item {
  58.     width: 33.333333%;
  59.     height: 40px;
  60.     justify-content: center;
  61.     align-items: center;
  62. }
  63.  
  64. .menu-list-item-text {
  65.     font-size: 12px;
  66.     font-weight: bold;
  67. }
  68.

 menu.hml代码

  1. <div class="menu-container">
  2.     <div class="menu-tab">
  3.         <div class="menu-tab-item {{ $item === currentTab ?'active' :'normal' }}"
  4.                for="{{tabs}}"
  5.              @click="handleTabClick($item)"
  6.                 >
  7.             <text>
  8.                 {{$item}}
  9.              </text>
  10.          </div>
  11.  
  12.  
  13.  
  14.     </div>
  15.     <div class="menu-list">
  16.         <div class="menu-list-item" for="{{lists}}">
  17.             <text>
  18.                 <span>{{ $item }}</span>
  19.             </text>
  20.         </div>
  21.     </div>
  22. </div>

 menu.js代码

  1. export default{
  2.     props: ['menuData','firstItem'],
  3.     data(){
  4.         return{
  5.             currentTab: this.firstItem
  6.         }
  7.     },
  8.     computed:{
  9.         tabs(){
  10.             return Object.keys(this.menuData)
  11.         },
  12.         lists(){
  13.             return this.menuData[this.currentTab]
  14.         }
  15.     },
  16.     handleTabClick(currentTab){
  17.         this.currentTab=currentTab
  18.     },
  19.     onReady(){
  20.         this.$watch('firstItem',(newValue)=>{
  21.             this.currentTab=newValue
  22.         })
  23.     }
  24. }

index.hml代码

  1. <element name='comp' src='../../components/tabbar/tabbar.hml'></element>
  2. <element src='../../components/child/child.hml'></element>
  3. <element src='../index/menu/menu.hml' name="cb-menu"></element>
  4. <element name="cb-search" src="../../common/components/components/search/search.hml"></element>
  5. <div class="cate-container">
  6.     <div class="cate-header">
  7.         <div class="cate-header-nav">
  8.         <div class="cate-header-nav-item" @click="handleSliderClick('category')">
  9.             <text>
  10.                 分类
  11.             </text>
  12.         </div>
  13.         <div class="cate-header-nav-item" @click="handleSliderClick('material')">
  14.             <text>
  15.                 食材
  16.             </text>
  17.         </div>
  18.         <div if="{{type==='category'}}" class="cate-header-nav-slider">
  19.             <text>
  20.                 分类
  21.             </text>
  22.         </div>
  23.             <div else class="cate-header-nav-slider move">
  24.                 <text>
  25.                     食材
  26.                 </text>
  27.             </div>
  28.     </div>
  29. </div>
  30.     <div>
  31.         <cb-search> from="cate"</cb-search>
  32.     </div>
  33.     <div>
  34.         <cb-menu menu-data="{{filteredMenuData}}"first-item="{{type==='category' ? '热门':'肉类'}}"></cb-menu>
  35.     </div>
  36.  
  37.     <div>
  38.      <comp index="0"></comp>
  39.     </div>
  40. </div>
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50. <!--<div>
  51.     <text>
  52.         信息页面
  53.     </text>
  54.     <text>{{num}}</text>
  55.  
  56.     <child @change-father-num="changeNum">
  57.         <text>父组件slot内容</text>
  58.         <text slot="other"></text>
  59.     </child>
  60.     <comp index="0"></comp>
  61. </div>-->

index.css代码

  1. .cate-container {
  2.     flex-direction: column;
  3. }
  4.  
  5. .cate-header {
  6.     width: 100%;
  7.     height: 44px;
  8.     background-color: #ee742f;
  9.     justify-content: center;
  10.     align-items: center;
  11. }
  12.  
  13. .cate-header-nav {
  14.     width: 140px;
  15.     height: 30px;
  16.     border-radius: 30px;
  17.     border: 0.5px solid #FFF;
  18.     position: relative;
  19.     z-index: 1;
  20. }
  21.  
  22. .cate-header-nav-item {
  23.     flex: 1;
  24.     justify-content: center;
  25.     align-items: center;
  26.     height: 30px;
  27. }
  28.  
  29. .item-text {
  30.     font-size: 12px;
  31.     color: #FFF;
  32. }
  33.  
  34. .cate-header-nav-slider {
  35.     position: absolute;
  36.     left: 0;
  37.     border-radius: 30px;
  38.     width: 70px;
  39.     height: 30px;
  40.     background-color: #FFF;
  41.     z-index: 0;
  42.     justify-content: center;
  43.     align-items: center;
  44.     transition: left 200ms ease-in;
  45. }
  46.  
  47. .slider-text {
  48.     font-size: 12px;
  49.     color: #ee742f;
  50. }
  51.  
  52. .move {
  53.     left: 70px;
  54. }
  55.

index.js代码

  1. // @ts-nocheck
  2. import menuData from '../../common/data/cookbook-category.json'
  3. export default {
  4.     data: {
  5.        type:'category',
  6.         menuData:[]
  7.     },
  8.     handleSliderClick(type){
  9.         this.type=type
  10.     },
  11.     computed:{
  12.         filteredMenuData(){
  13.             return this.menuData[this.type]
  14.         }
  15.  
  16.     },
  17.     onInit(){
  18.         this.menuData=menuData.data
  19.     }
  20. }

index.css代码

  1. /*@import "../../../common/scss/title.scss";*/
  2.  
  3. .container {
  4.     flex-direction: column;
  5.     justify-content: center;
  6.     align-items: center;
  7.     width: 100%;
  8.     height: 100%;
  9. }
  10.  
  11. .title {
  12.     font-size: 40px;
  13.     color: #000000;
  14.     opacity: 0.9;
  15. }
  16.  
  17. @media screen and (device-type: tablet) and (orientation: landscape) {
  18.     .title {
  19.         font-size: 100px;
  20.     }
  21. }
  22.  
  23. @media screen and (device-type: wearable) {
  24.     .title {
  25.         font-size: 28px;
  26.         color: #FFFFFF;
  27.     }
  28. }
  29.  
  30. @media screen and (device-type: tv) {
  31.     .container {
  32.         background-image: url("/common/images/Wallpaper.png");
  33.         background-size: cover;
  34.         background-repeat: no-repeat;
  35.         background-position: center;
  36.     }
  37.  
  38.     .title {
  39.         font-size: 100px;
  40.         color: #FFFFFF;
  41.     }
  42. }
  43.  
  44. @media screen and (device-type: phone) and (orientation: landscape) {
  45.     .title {
  46.         font-size: 60px;
  47.     }
  48. }
  49.  
  50.  
  51. .more-container {
  52.     flex-direction: column;
  53. }
  54.  
  55. /*.cb-title {*/
  56. /*    @extent %cb-title;*/
  57. /*}*/
  58.  
  59. .cb-title {
  60.     width: 100%;
  61.     height: 44px;
  62.     background-color: #ee742f;
  63.     justify-content: center;
  64.     align-items: center;
  65. }
  66.  
  67. .cb-title-text {
  68.     font-size: 16px;
  69.     font-weight: normal;
  70.     color: #FFF;
  71. }
  72.  
  73. .camera-container {
  74.     width: 100%;
  75.     height: 270px;
  76.     flex-direction: column;
  77.     align-content: center;
  78.     justify-content: center;
  79. }
  80.  
  81. .camera {
  82.     width: 100%;
  83.     height: 240px;;
  84. }
  85.  
  86. .btn-takePhoto {
  87.     width: 90%;
  88.     height: 30px;
  89.     align-self: center;
  90. }
  91.  
  92. .switch-container {
  93.     padding-left: 20px;
  94. }
  95.  
  96. .switch-container-text {
  97.     font-size: 12px;
  98. }
  99.  
  100. .image_camera {
  101.     margin-top: 10px;
  102.     width: 100%;
  103.     object-fit: contain;
  104.     height: 400px;
  105. }
  106.

 index.hml代码

  1. <element name='comp' src='../../components/tabbar/tabbar.hml'></element>
  2.  
  3. <!--<div class="container">
  4.     <text class="title">
  5.        个人中心
  6.     </text>
  7.     <comp index="3"></comp>
  8. </div>-->
  9. <div class="more-container">
  10.     <div div="cb-title">
  11.         <text>个人中心</text>
  12.     </div>
  13.     <div class="camera-container">
  14.         <camera class="camera" ref="camera"></camera>
  15.         <div>
  16.             <text>
  17.             
  18.             </text>
  19.         </div>
  20.         <button @click="handleClick" class="btn-takePhoto">
  21.             拍照
  22.         </button>
  23.     </div>
  24.     <div class="switch-container">
  25.         <text>
  26.             是否滑动切换
  27.         </text>
  28.         <switch checked="{{checked}}" @chenge="handleChange"></switch>
  29.     </div>
  30.     <comp index="3"></comp>
  31. </div>

 index.js代码

  1. /*export default {
  3.     data: {
  4.         title: ""
  5.     },
  6.     onInit() {
  7.         this.title = this.$t('strings.world');
  8.     }
  9. }*/
  10. export default{
  11.     data:{
  12.         photoUri:'',
  13.         checked:true
  14.     },
  15.  
  16.     handleClick(){
  17.         this.$refs.camera.takePhoto({
  18.             success(uri){
  19.                 this.photoUri=uri
  20.             },
  21.             fail(error){
  22.  
  23.             }
  24.         })
  25.     },
  26.     handleChange(obj){
  27.  
  28.     }
  29. }

index.css代码

  1. .cb-container {
  2.     flex-direction: column;
  3. }
  4.  
  5. .cb-title {
  6.     width: 100%;
  7.     height: 44px;
  8.     justify-content: center;
  9.     align-items: center;
  10.     background-color: #00ff00;
  11. }
  12.  
  13. text {
  14.     color: white;
  15.     font-size: 16px;
  16.     font-weight: normal;
  17. }
  18.  
  19. .cb-body {
  20.     flex: 1;
  21. }
  22.  
  23. .cb-body-item {
  24.     flex-direction: column;
  25. }
  26.

 index.hml代码

  1.  
  2. <element name='cb-hotcake' src='./hotcake/hotcake'></element>
  3. <element name='cb-swiper' src='./swiper/swiper.hml'></element>
  4. <element name='cb-top' src='./top/top.hml'></element>
  5. <element name='comp' src='../../components/tabbar/tabbar.hml'></element>
  6. <element name="cb-search" src="../../common/components/components/search/search.hml"></element>
  7. <div class="cb-container" ><!--scrollable="{{pageScrollable}}"-->
  8.     <div class="cb-title">
  9.     <text>
  10.        美食大全
  11.     </text>
  12.     </div>
  13.     <div class="cb-body">
  14.         <list>
  15.             <list-item class="cb-body-item">
  16.                <!-- <cb-hotcake></cb-hotcake>-->
  17.                 <cb-swiper list="{{list}}"></cb-swiper>
  18.  
  19.              <!--   <cb-hotcake></cb-hotcake>-->
  20.             </list-item>
  21.         </list>
  22.     </div>
  23.  
  24.     <div class="cb-body">
  25.         <list>
  26.             <list-item class="cb-body-item">
  27.             <!-- <cb-hotcake></cb-hotcake>-->
  28.                 <cb-search from="index"></cb-search>
  29.  
  30.             <!--   <cb-hotcake></cb-hotcake>-->
  31.             </list-item>
  32.         </list>
  33.     </div>
  34.  
  35.  
  36.  
  37.     <div class="cb-body">
  38.         <list>
  39.             <list-item class="cb-body-item">
  40.                 <cb-hotcake></cb-hotcake>
  41.  
  42.  
  43.             <!--   <cb-hotcake></cb-hotcake>-->
  44.             </list-item>
  45.         </list>
  46.     </div>
  47.  
  48.  
  49.     <div class="cb-body">
  50.         <list>
  51.             <list-item class="cb-body-item">
  52.                 <cb-top list="{{list}}"></cb-top>
  53.  
  54.  
  55.  
  56.             </list-item>
  57.         </list>
  58.         <comp index="1"></comp>
  59.     </div>
  60.  
  61. </div>

 index.js代码

  1. // @ts-nocheck
  2.  
  3. import list from '../../common/data/cookbook-list.json'
  4. import fetch from '@system.fetch';
  5. export default {
  6.     data: {
  7.         list:[]
  8.        // title: ""
  9.     },
  10.  
  11.     onInit() {
  12.         this.list=list.data;
  13.        // this.title = this.$t('strings.world');
  14.        /* currentSelected:0,
  15.         pageScrollable:true*/
  16.         fetch.fetch({
  17.         url:'http://securit.qfjava.cn/hm/cookbook-list.json',
  18.             responseType:'json',
  19.             success:res=>{
  20.                 const result=JSON.parse(res.data)
  21.                 this.list=result.data
  22.             }
  23.     })
  24.     }
  25. }

config.json更改添加部分代码

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

 

  1. "reqPermissions": [
  2.       {
  3.         "name": "ohos.permission.GET_NETWORK_INFO"
  4.       },
  5.       {
  6.         "name": "ohos.permission.SET_NETWORK_INFO"
  7.       },
  8.       {
  9.         "name": "ohos.permission.INTERNET"
  10.       },
  11.       {
  12.         "name": "ohos.permission.CAMERA"
  13.       }
  14.  
  15.     ]

更改此部分代码为截图所示 

 

  1.  "deviceConfig": {
  2.     "default": {
  3.       "network": {
  4.         "cleartextTraffic": true
  5.       }
  6.     }
  7.   },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/228832
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号