小编xen*_*ics的帖子
CSS-滚动时固定在iOS Safari的底部
我正在构建一个应用程序，我想将导航栏固定在浏览器底部。我有类似的东西
<div style="display: flex; flex-direction: column; height: 100%"
<header>Header</header>
<section style="height: 100%">Main Content</section>
<footer>Sticky footer</footer>
<div>
这非常适合台式机。这是一个简单的示例，其中红色是页眉，黄色是页脚，蓝色是内容。
但是，在iOS Safari（我也认为某些Android浏览器）中，滚动时，工具栏会覆盖底部44px左右。
我在这里阅读了一些其他的解决方法，但没有真正的“好的”解决方案。但是，似乎iOS上的Instagram网站解决了此问题：
不滚动：
当您很好地滚动工具栏上方的底部导航位置时：
一种解决方案是使工具栏始终可见，但我想采用Instagram风格的方法。我不确定如何在CSS（或CSS + JS）中实现。有谁知道我如何实现Instagram的效果？滚动时，Safari iOS工具栏的底部导航栏几乎看不到移动。
编辑：这是解决此问题的工作演示。
<!DOCTYPE html>
<html style="height:100%"lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="height:100%; padding: 0; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<header>Header</header>
<div>
<div>Main content</div>
</div>
<footer style="position: fixed; bottom: 0; width: 100%">Sticky footer</footer>
</div>
</body>
</html>
5
推荐指数
推荐指数
1
解决办法
解决办法
6601
查看次数
查看次数
Object.entries.map 渲染 React 组件数组
我正在开发一个 React 网络应用程序。到目前为止，我总是将数据存储在数组中，如下所示：
areas: [
{ id: 0, title: 'Some title', isSelected: false }
]
然后我就可以做
this.state.areas.map(x => <Component key={x.id} ... />
然而，在浏览完 Redux 文档之后，我发现一个优点是存储数据，如下所示：
areas: {
'some title': { id: 0, isSelected: false }
}
这使得更新当前选定的区域变得非常容易
this.state.areas['some title].isSelected = true
与通过 id 执行 .filter 然后更新isSelected.
但是，使用对象键而不是数组存储意味着我必须编写：
{
Object.entries(this.props.areas).map(([k, v]) => {
return <Component key={k.id} ... />
})
}
可读性差了很多，而且打字也多了很多。
所以我的问题是：
- 有没有比
Object.entries...实现我正在做的事情更好的方法？或者，还有更好的方法？ - 我应该首先使用数组吗？
谢谢。
3
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
在每次操作Vuex之前调用突变
Vuex允许我们编写插件，无论何时提交突变，插件都会执行某些操作。有什么办法可以实现类似的功能，但是要有动作？
我注意到您可以像vuexfire库那样“增强”操作，这是最好的方法吗？
我的目标是找到某种方式来跟踪当前是否挂起多少个ajax调用，并根据该数字自动显示某种动画。
编辑：澄清一下，我想知道是否有一种方法可以仅使用Vuex来实现，而不必引入其他库中。
3
推荐指数
推荐指数
1
解决办法
解决办法
1264
查看次数
查看次数