当前位置:网站首页>Hongmeng OS' fourth learning
Hongmeng OS' fourth learning
2022-07-05 20:25:00 【Taoping】
Target interface :
One 、 The implementation of the search box
stay common Create under folder search Folder (.hml,.css,.js)
.hml
<div class="search-container">
<div class="search-input">
<image class="search-input-image" src="/common/images/search.png"></image>
<text class="search-input-text"> Search here for what you want , For example, Sichuan cuisine </text>
</div>
</div>
.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;
}
Two 、 Top level effect realization
.hml
<element name="cb-menu"src="./menu/menu"></element>
<element name='comp' src='../../../components/tabbar/tabbar.hml'></element>
<element name='cb-search' src="../../../common/components/search/search"></element>
<div class="cate-container">
<div class="cate-header">
<div class="cate-header-nav">
<div class="cate-header-nav-item" @click="handleSliderClick('category')">
<text class="item-text">
classification
</text>
</div>
<div class="cate-header-nav-item" @click="handleSliderClick('material')">
<text class="item-text">
The ingredients
</text>
</div>
<div if="{
{type==='category'}}" class="cate-header-nav-slider">
<text class="slider-text">
classification
</text>
</div>
<div else class="cate-header-nav-slider move">
<text class="slider-text">
The ingredients
</text>
</div>
</div>
</div>
<comp index="1"></comp>
<cb-search from="cate"></cb-search>
<cb-menu menu-data="{
{filteredMenuData}}" first-item="{
{type==='category'?' hot ':' meat '}}"></cb-menu>
</div>
.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;
}
.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
}
}
3、 ... and 、 The realization of menu function
stay category Create menu Folder
.hml
<div class="menu-container">
<div class="menu-tab">
<div
class="menu-tab-item {
{$item === currenTab?'menu-tab-item-active':'menu-tab-item-normal'}}"
for="{
{tabs}}"
@click="handleTabClick($item)"
>
<text class="menu-tab-item-text">
{
{$item}}
</text>
</div>
</div>
<div class="menu-list">
<div class="menu-list-item" for="{
{lists}}">
<text class="menu-list-item-text">
<span>{
{$item}}</span>
</text>
</div>
</div>
</div>
.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;
}
.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
})
}
}
边栏推荐
- Zero cloud new UI design
- PyTorch 1.12发布,正式支持苹果M1芯片GPU加速,修复众多Bug
- CCPC 2021威海 - G. Shinyruo and KFC(组合数,小技巧)
- 信息学奥赛一本通 1340:【例3-5】扩展二叉树
- [quick start of Digital IC Verification] 3. Introduction to the whole process of Digital IC Design
- 19 Mongoose模块化
- y57.第三章 Kubernetes从入门到精通 -- 业务镜像版本升级及回滚(三十)
- Unity editor extended UI control
- 【刷题记录】1. 两数之和
- Schema and model
猜你喜欢
【数字IC验证快速入门】1、浅谈数字IC验证,了解专栏内容,明确学习目标
【刷题记录】1. 两数之和
1、强化学习基础知识点
Leetcode skimming: binary tree 17 (construct binary tree from middle order and post order traversal sequence)
Station B up builds the world's first pure red stone neural network, pornographic detection based on deep learning action recognition, Chen Tianqi's course progress of machine science compilation MLC,
Leetcode brush questions: binary tree 11 (balanced binary tree)
Leetcode skimming: binary tree 16 (path sum)
About the priority of Bram IP reset
Informatics Orsay all in one 1339: [example 3-4] find the post order traversal | Valley p1827 [usaco3.4] American Heritage
解决php无法将string转换为json的办法
随机推荐
Guidelines for application of Shenzhen green and low carbon industry support plan in 2023
Leetcode brush question: binary tree 14 (sum of left leaves)
Relationship between mongodb documents
Leetcode skimming: binary tree 16 (path sum)
CVPR 2022 | common 3D damage and data enhancement
Leetcode(347)——前 K 个高频元素
Convolution free backbone network: Pyramid transformer to improve the accuracy of target detection / segmentation and other tasks (with source code)
物联网智能家居基本方法实现之经典
Rainbond 5.7.1 支持对接多家公有云和集群异常报警
CTF逆向基础
. Net distributed transaction and landing solution
小程序全局配置
ROS2专题【01】:win10上安装ROS2
Oracle-表空间管理
19 mongoose modularization
How to select the Block Editor? Impression notes verse, notation, flowus
【刷题记录】1. 两数之和
插值查找的简单理解
Informatics Olympiad 1338: [example 3-3] hospital setting | Luogu p1364 hospital setting
July 4, 2022 - July 10, 2022 (UE4 video tutorial MySQL)