首页 > 其他 > 详细

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

时间:2019-10-30 12:16:52      阅读:91      评论:0      收藏:0      [点我收藏+]

 
技术分享图片

可以把复杂的类型做命名。例如接口中没有定义年龄,在定义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布局】让顶部导航滚动

原文:https://www.cnblogs.com/wangjunwei/p/11763813.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!