详情页底部fixed去除抖动

简介: 【8月更文挑战第27天】

当我们有类似这样的需求,详情页底部需要放很多个操作按钮(如关闭、审批通过、驳回等),然后主内容区域可以滚动。
那么我们通常会把底部这一栏内容用fixed固定在底部,如下示例:

但是这样有一个问题,当从列表页点击详情页时,你会发现底部fixed固定的部分会抖动一下才显示,体验很不好

优化
我们自定义一个组件,用于优化来去除抖动,代码如下:
假设新建文件components/Inbody/index.vue

代码








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
用法
只需要用这个组件,把fixed固定的内容包裹起来即可




编辑
取消
保存


import InBody from "@/components/InBody/index.vue";
export default {
components: {
InBody
},
}

相关文章
|
6月前
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
|
3月前
|
容器
追悼日网站自动变为黑白(解决filter导致的absolute和fixed定位问题)
这篇文章介绍了如何解决在网站页面上使用`filter: grayscale(100%)`导致布局问题的方法,建议将`filter`属性应用在`html`根元素上,以避免影响`absolute`和`fixed`定位的元素。
追悼日网站自动变为黑白(解决filter导致的absolute和fixed定位问题)
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
vitepress如何配置右上角的小两侧标志,利用nav标签进行修改,右侧边栏如何设置成自动弹出水平框,让原先隐藏的框能够显示出来
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
74 0
layui列表页滚动时弹出窗无法居中的解决方案
layui列表页滚动时弹出窗无法居中的解决方案
125 0
|
小程序 JavaScript
小程序顶部导航栏,可滑动,可动态选中放大
小程序顶部导航栏,可滑动,可动态选中放大
202 0
|
前端开发 JavaScript
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
当页面内容过多时,浏览网页时滚动距离会变大,当你想回看上面的内容时,需要用鼠标滚轮或拉动滚动条来移动回去。这时如果网页设置电梯导航栏会提高网页阅读的方便性和高效性,我们只需要操作电梯导航栏上面的功能,就能去想要的模块,比如点击返回顶部按钮后会调转到页面顶部。
408 0
JavaScript缓慢滚动到页面顶部——电梯导航栏fixed定位
|
前端开发 JavaScript 容器
分享个小案例-Fixed定位的框选功能
最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发。在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的。但是现实需求里几乎都是针对某个区域的框选。如果用绝对定位实现就比较繁琐了,需要调整定位原点。下面介绍一种基于Fixed定位的框选实现。
170 0
分享个小案例-Fixed定位的框选功能
|
iOS开发 UED
webapp手机网站顶部固定fixed不为0的情现,滑动出现闪动
webapp手机网站顶部固定fixed不为0的情现,滑动出现闪动
156 0