当前位置:网站首页>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
})
}
}
边栏推荐
- c语言oj得pe,ACM入门之OJ~
- sun. misc. Base64encoder error reporting solution [easy to understand]
- Pytorch 1.12 was released, officially supporting Apple M1 chip GPU acceleration and repairing many bugs
- sort和投影
- 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,
- Ros2 topic [01]: installing ros2 on win10
- kubernetes资源对象介绍及常用命令(五)-(ConfigMap&Secret)
- C language OJ gets PE, OJ of ACM introduction~
- Some problems encountered in cocos2d-x project summary
- [quick start of Digital IC Verification] 6. Quick start of questasim (taking the design and verification of full adder as an example)
猜你喜欢
[quick start of Digital IC Verification] 3. Introduction to the whole process of Digital IC Design
CTF逆向基础
Oracle-表空间管理
. Net distributed transaction and landing solution
A solution to PHP's inability to convert strings into JSON
National Eye Care Education Conference, 2022 the Fourth Beijing International Youth eye health industry exhibition
Classic implementation method of Hongmeng system controlling LED
Scala基础【HelloWorld代码解析,变量和标识符】
小程序事件绑定
走入并行的世界
随机推荐
.Net分布式事务及落地解决方案
[quick start of Digital IC Verification] 1. Talk about Digital IC Verification, understand the contents of the column, and clarify the learning objectives
CVPR 2022 | 常见3D损坏和数据增强
Pytorch 1.12 was released, officially supporting Apple M1 chip GPU acceleration and repairing many bugs
鸿蒙os第四次学习
信息学奥赛一本通 1339:【例3-4】求后序遍历 | 洛谷 P1827 [USACO3.4] 美国血统 American Heritage
Informatics Olympiad 1337: [example 3-2] word search tree | Luogu p5755 [noi2000] word search tree
全国爱眼教育大会,2022第四届北京国际青少年眼健康产业展会
14、Transformer--VIT TNT BETR
USACO3.4 “破锣摇滚”乐队 Raucous Rockers - DP
July 4, 2022 - July 10, 2022 (UE4 video tutorial MySQL)
sort和投影
Enter the parallel world
mongodb文档间关系
Classic implementation of the basic method of intelligent home of Internet of things
Leetcode(695)——岛屿的最大面积
Unity编辑器扩展 UI控件篇
关于BRAM IP复位的优先级
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,
Ffplay document [easy to understand]