鸿蒙os实现美食菜单

免费图片托管网站

Postimages — 免费图片托管 / 图片上传

效果

目录样式

 

 代码

data中代码cookbook-hotcat.json

[
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "家常菜"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "汤"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "川菜"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "粤菜"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "早餐"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "火锅"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "素菜"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "粥"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "凉菜"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "烘烤"
  },
  {
    "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
    "title": "饮品"
  }
]


 data中代码cookbook-list.json

{
  "ret": true,
  "data": [
    {
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    },{
      "img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
      "all_click": "3334.9\u4e07",
      "favorites": "20.4\u4e07"
    }
  ]
}


 news中hotcake代码hml

<div class="cb-hc-container">
 
    <div class="cb=hc-title">
        <text>
        热门分类
        </text>
    </div>
    <div class="cb-hc-list">
        <div class="cb-hc-item" for="{{list}}">
            <image src="{{$item.img}}"></image>
            <text>{{$item.title}}</text>
        </div>
    </div>
</div>


 news中hotcake代码js

// @ts-nocheck
import list from '../../../common/data/cookbook-hotcat.json'
export default{
    data:{
        list:[]
    },
    onReady(){
        this.list=list
    }
}
 news中hotcake代码css

.cb-hc-container {
    flex-direction: column;
}
 
.cb-hc-title {
    border-bottom-width: 0.5px;
    border-bottom-color: #eee;
    height: 44px;
}
 
text {
    font-size: 12px;
    padding-left: 10px;
}
 
.cb-hc-list {
    flex-wrap: wrap;
    margin-top: 20px;
}
 
.cb-hc-item {
    width: 33.33333%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
 
image {
    object-fit: cover;
    width: 70px;
    height: 70px;
    border-radius: 8px;
}
 
text {
    font-size: 14px;
    line-height: 30px;
}


swiper中代码hml

<div class="cb-swiper-container">
    <swiper>
     <image for="{{list.slice(0,5)}}" src="{{$item.img}}">
 
     </image>
    </swiper>
</div>


swiper中代码js

export default{
    props:{
        list:{
            type:Array
    }
    },
    onReady(){
    console.log(this.list)
    }
}


swiper中代码css

.cb-swiper-container {
    height: 240px;
}
 
swiper {
    width: 100%;
}
 
image {
    width: 100%;
    height: 100%;
    object-fit: fill;
}


top中代码hml

<div class="cb-top-container">
    <div class="cb-title-title">
    <text>
        精品好菜
    </text>
    </div>
    <div class="cb-top-body">
        <div class="cb-top-item" for="{{list.slice(0,10)}}">
            <image src="{{$item.img}}"></image>
            <div class="cb-top-item-info">
            <text class="cb-top-item-title">
                {{$item.name}}
            </text>
            <text class="cb-top-item-subtitle">
                {{$item.all_click}}浏览{{$item.favorites}}收藏
            </text>
            </div>
        </div>
    </div>
    </div>


top中代码js

export default{
    props:{
        list:{
            type:Array
        }
    },
    onReady(){
        console.log(this.list)
    }
}


top中代码css

.cb-top-container {
    flex-direction: column;
    background-color: #f5f5f5;
}
 
.cb-title-title {
    height: 50px;
    padding-top: 5px;
    padding-left: 10px;
    color: #333;
}
 
text {
    font-size: 12px;
}
 
.cb-top-body {
    flex-wrap: wrap;
    padding-left: 10px;
    padding-right: 10px;
}
 
.cb-top-item {
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding-bottom: 15px;
    margin-bottom: 10px;
    height: 160px;
}
 
image {
    width: 100%;
    flex: 1;
    object-fit: contain;
}
 
.cb-top-item-info {
    height: 50px;
    flex-direction: column;
    align-items: center;
}
 
.cb-top-item-title {
    font-size: 16px;
}
 
.cb-top-item-subtitle {
    font-size: 12px;
    color: #666;
    font-weight: 100;
}
 


news中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>
 
<div class="cb-container">
    <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-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>


news中index.js代码

// @ts-nocheck
 
import list from '../../common/data/cookbook-list.json'
 
export default {
    data: {
        list:[]
       // title: ""
    },
    onInit() {
        this.list=list.data;
       // this.title = this.$t('strings.world');
    }
}
news中index.css代码

.cb-container {
    flex-direction: column;
}
 
.cb-title {
    width: 100%;
    height: 44px;
    justify-content: center;
    align-items: center;
    background-color: #ee742f;
}
 
text {
    color: white;
    font-size: 16px;
    font-weight: normal;
}
 
.cb-body {
    flex: 1;
}
 
.cb-body-item {
    flex-direction: column;
}

华为鸿蒙HarmonyOS开发整理资料汇总,共38份。 1学前必读:HarmonyOS学习资源主题分享 2学前必读:OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述:技术特性 3-2.HarmonyOS概述:开发工具与平台 3-3.HarmonyOS概述:系统安全 3-4.HarmonyOS概述:系统定义 3-5.HarmonyOS概述:下载与安装软件 3-6.HarmonyOS概述:应用开发基础知识 3-7.HarmonyOS概述:最全HarmonyOS文档和社区资源使用技巧 4-1.生态案例:【开发者说】重塑经典,如何在HarmonyOS手机上还原贪吃蛇游戏 4-2.生态案例:HarmonyOLabo涂鸦鸿蒙亲子版 4-3.生态案例:HarmonyOS分镜头APP案例 4-4.生态案例:HarmonyOS时光序历史学习案例 4-5.生态案例:HarmonyOS先行者说 宝宝巴士携手HarmonyOS共同打造儿童教育交互新体验 4-6.生态案例:HarmonyOS智能农场物联网连接实践 4-7.生态案例:分布式开发样例,带你玩转多设备 4-8.生态案例:华为分布式日历应用开发实践 5-1.【Codelab】HarmonyOS基于图像模块实现图库图片的四种常见操作 5-2.【CodeLab】手把手教你创建第一个手机“Hello World” 5-3.【Codelab】如此简单!一文带你学会15个HarmonyOS JS组件 5-4.【Codelab】懒人“看”书新法—鸿蒙语音播报,到底如何实现? 5-5.【Codelab】基于AI通用文字识别的图像搜索,这波操作亮了 5-6.【Codelab】开发样例概览 6-1.技术解读之HarmonyOS轻量JS开发框架与W3C标准差异分析 6-2.技术解读之HarmonyOS驱动加载过程分析 6-3.技术解读之HarmonyOS组件库使用实践 6-4.技术解读之华为架构师解读:HarmonyOS低时延高可靠消息传输原理 6-5.技术解读之解密HarmonyOS UI框架 6-6.技术解读之如何从OS框架层面实现应用服务功能解耦 7-1.常见问题之HarmonyOS元服务的设计与开发解析 7-2.常见问题之Java开发 7-3.常见问题之JS开发 7-4.常见问题之模拟器登录 7-5.常见问题之模拟器运行 7-6.常见问题之如何使用JsJava开发HarmonyOS UI 7-7.常见问题之应用配置 7-8.常见问题之预览器运行 8【视频合集】入门到进阶视频学习资料合集30+

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

TA像未融化的糖

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值