IPHONE / H5 / IOS 14 版本滚条 / 滑动失效问题

需求场景是在一个使用绝对定位布局的页面中,动态渲染一个可以滑动的子模块。

开发的时候在电脑 Chrome 上面调试没问题,安卓手机和常规 IOS 版本测试了也没问题,但是由于苹果最近更新了新的系统版本(14),在新版本上出现了滚动滑动不了的问题。

“IPHONE / H5 / IOS 14 版本滚条 / 滑动失效问题”继续阅读

深入浅出React和Redux – 程墨 著

读完时间:未完待续(截止 8/31 进度 20%)

出版时间:2017 年 4 月 28 日

1.2 增加一个新的 React 组件

在使用 JSX 的范围内必须要有 React。也就是说,在使用 JSX 的代码文件中,即使代码中并没有直接使用 React,也一定要导入这个 React,这是因为 JSX 最终会被转译成依赖于 React 的表达式。

“深入浅出React和Redux – 程墨 著”继续阅读

CSS 实现内容高度不够的时候底部(footer)自动贴底

在 UI 切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多出很多空白,非常影响美观。

方案 1:Flex-Box

头部使用 position: sticky; 吸顶,再使用盒子(main)来包住内容(container > content)和底部(footer),这个盒子设置最小高度为除头部外的剩余屏幕高度:min-height: calc(100vh - 50px);,盒子里面使用弹性布局(flex: 1 1 auto;)让内容区域自动撑开,而底部保持不变(flex: 0 0 auto;),这样就有了内容不够时底部自动吸底,内容足够时底部自动下移的效果。

“CSS 实现内容高度不够的时候底部(footer)自动贴底”继续阅读