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布局 ...
随机推荐
- mysql性能优化之服务器参数配置-内存配置
MySQL服务器参数介绍 MySQL获取配置信息路径 命令行参数 mysqld_safe --datadir=/data/sql_data 配置文件 mysqld --help --verbose | ...
- js eval()
1.基本字符串(数组字符串,json字符串)类型转化为对象(对象数组,json对象): eval("("+字符串+")"); 2.json字符串转化为json ...
- 【HICP Gauss】数据库 数据库管理(数据库对象 表空间 索引 序列 分区 视图)-8
什么是数据库对象 数据库对象包括 表 索引 分区 视图 序列 同义词 数据库支持对象存储过程 自定义函数 触发器 表空间 高级包 表 数据库中的数据结构 存储数据以及描述数据间的关系 表由行和列组成 ...
- react中IOS手机里面两个input同时存在时,聚焦focus失效解决办法
最近在做webapp搜索功能时,用到两个input同时存在时,轻点input聚焦时,ios手机软键盘弹起又失效,一直在寻找合理的解决办法,现在最简单的总结回顾: <一>bug显示 < ...
- 从url中下载资源(目前测试只有照片,文件类的没有进行测试)
首先:是工具类: public class DownLoadUtils { /** * 从网络Url中下载文件 * * @param urlStr url路径 * @param fileName 文件 ...
- 阿里云——扩展Linux系统盘
前言 地址|https://help.aliyun.com/document_detail/111738.html?spm=a2c4g.11186623.2.7.1d284c07SFRBaq#sect ...
- How to Start Up an Open Source Company
https://evolveum.com/start-open-source-company/ Evolveum is a successful open source company now. We ...
- BZOJ 4764: 弹飞大爷 LCT
思路并不难,主要是细节需要注意一下. 在 lct 中,删边要写成:f[lson]=0,lson=0 (因为删 x->y 时 y 不一定是左儿子,y 只是 x 的前驱) 然后 f[lson]=ls ...
- 在windbg调试.net时遇到的问题
调试.net应用程序时,有时会在windbg中收到错误消息.以下是我最常遇到的几个问题. Failed to start stack walk---启动堆栈遍历失败 如果你运行sos命令!clrsta ...
- 集成omnibus-ctl+ chef 制作一个可配置的软件包
前边有写过使用omnibus-ctl 制作软件包的,但是当时没有集成chef,只有一个空壳子,实际上omnibus-ctl 已经内置 了对于chef 的操作(但是我们还需要在添加一个依赖),以下简单说 ...