2-4 【接口Interface Flex布局】让顶部导航滚动

可以把复杂的类型做命名。例如接口中没有定义年龄,在定义person的时候 如果写了age那么就会报错。因为我们接口中并没有定义年龄。

可选属性,只读属性

新的布局方式



下面这里menu设置类型为TopMenu的接口,那么后面的热门、男装、手机 就报错了。

输入了title属性后,还缺少link的属性。


想让link属性可选。link属性后面加问号就可以了。

设置link属性为只读的

因为link设置了为只读的,所以下面定义的test方法里面给link属性赋值就会报错了。


接口的函数定义
参数都是number类型的。返回的类型也是number类型的

es6箭头函数的写法

相当于下面这种方式的简写,省略了大括号和return

只有一行内容可以简写成这种写法

接口-字典类型
定义索引的类型是字符类型,且索引值也是字符类型。

定义字典类型的时候,如果复制了数字1 那么就会报错了。因为规定的是string类型的

改成string类型就没问题了

输出a的值看一下

前端需要改一下

把test改成constructor构造函数

默认输出了字典的值

这里为什么有绿线呢?

其实是可以直接用点的形式,这种写法


把josn的数据 复制过来。


我们希望菜单是不折行,在上面滚动的。外层用flex布局

按照行布局


每个item折行了。


column布局

row-reverse

倒着排列。人们拍在了最后。

竖着,倒着


默认就是横向的 ,不需要加

每个item折行的问题
避免折行的属性。

在手机上看的话,这里行下面就会有个滚动条出现。

这个滚动台实际上,我们是不需要的

这样他在真机上就没有滚动条了,在浏览器管是看不出来的

真机调试


‘
结束
2-4 【接口Interface Flex布局】让顶部导航滚动的更多相关文章
- 移动Web开发-WebApp(flex布局+移动端导航案例)
实际开发中的像素:css像素设备像素比dpr=设备像素/css像素标清屏dpr=1 高清屏dpr=2缩放改变的是css像素大小PPI(每英寸的物理像素点)=根号(屏幕横向分辨率²+屏幕纵向分辨率²)/ ...
- CSS3弹性伸缩布局(二)——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
- Flex布局新旧混合写法详解(兼容微信)
原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...
- Go语言学习笔记(四)结构体struct & 接口Interface & 反射
加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套: go中的struc ...
- flex布局justify-content属性和align-items属性设置
前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:h ...
- “妄”眼欲穿-CSS之flex布局和边框阴影
妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...
- list之flex布局写法
list之flex布局写法 移动端实际场景中经常会遇到将header置顶,然后下面list需要滚动的情况,通常的做法会是将header使用fixed的方式固定到顶部,然后list主体相对于header ...
- Flex布局和Bootstrap布局两者的比较
在Bootstrap中采用12栅格的布局,12份随意分配,但是不能解决5等分,7等分的问题.所以flex布局来协助. bootstrap的布局方式 <div class="row&qu ...
- grid - 它和flex布局有何区别?
Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定.调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的.(这里我们称为Flex). Flex布局 ...
随机推荐
- idea中新增package总是嵌套的解决方法
在idea中创建package,为了方便会将com.xx.xx作为一个package,下面添加对应的子package.比如service,config等.但是当我创建是总是会嵌套在下面变成了com.x ...
- Java 返回字符串中第一个不重复字符的下标 下标从0开始
比如abcdefgabdef 其中字符c和g不重复,返回c的小标,下标从0开始,那么是2 package com.example.demo; import org.testng.annotations ...
- python怎么连接MongoDB数据库
Python 要连接 MongoDB 需要 MongoDB 驱动,这里我们使用 PyMongo 驱动来连接. pip 安装: pip3 install pymongo 引入库: import pymo ...
- dockerhub下载加速
curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f5dad4ec.m.daocloud.io syste ...
- Sql操作时间
--. 当前系统日期.时间 -- ::27.277 --.时间操作 dateadd 在向指定日期加上一段时间的基础上,返回新的 datetime 值 dateadd(datepart,number,d ...
- HDU - 5823:color II (状压DP 反演DP)
题意:给定连通图,求出连通图的所有子图的颜色数. 一个图的颜色数,指最少的颜色数,给图染色,使得有边相邻的点之间颜色不同. 思路:首先想法是DFS枚举,然后计算颜色,发现对于给定图,求颜色不会求? 毕 ...
- BZOJ-1975: 魔法猪学院 (K短路:A*+SPFA)
题意:有N种化学元素,有M种转化关系,(u,v,L)表示化学物质由u变为v需要L能量,现在你有E能量,问最多有多少种不同的途径,使得1转为为N,且总能量不超过E. 思路:可以转为为带权有向图,即是求前 ...
- 写一段程序,删除字符串a中包含的字符串b,举例 输入a = "asdw",b = "sd" 返回 字符串 “aw”;一个容易被忽略的bug
代码如下: public class test{ public static void main(String args[]){ String test=test("sahsjkshabsh ...
- Java 内部类和Lambda
Java内部类 内部类又称为嵌套类,是在类中定义另外一个类.内部类可以处于方法内/外,内部类的成员变量/方法名可以和外部类的相同.内部类编译后会成为完全不同的两个类,分别为outer.class和ou ...
- (尚023)Vue_案例_交互添加
最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, ====== ...