vue底部分页利用position: fixed固定，切换时闪动问题

本文链接：https://blog.csdn.net/likexiziname/article/details/139087320

vue底部分页利用position: fixed固定，切换时闪动问题

为什么切换tab的时候固定底部会抖动
- 方法1 自定义一个InBody组件，将里面所有的元素放到body里面
- 方法2 在父元素上添加 `style="transform: none"`

为什么切换tab的时候固定底部会抖动

当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。既切换页面/tab时元素有一个销毁到重建的过程在此期间元素的父元素被销毁父元素切换为顶级元素（窗口），切换到另一个页面后父元素由顶级元素变为创建好的父元素，所以导致抖动。

方法1 自定义一个InBody组件，将里面所有的元素放到body里面

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'InBody',
  mounted() {
    const node = this.$mount().$el
    document.body.appendChild(node)//将里面所有的元素放到body里面
  },
  destroyed() {
    const node = this.$mount().$el
    node.remove()
  }
}
</script>

使用

<InBody>
      <pagination class="footer-global" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getList" />
    </InBody>

解释
在vue组件的mounted生命周期钩子函数中执行的操作。
1.mounted 在vue实例挂载到DOM元素上之后执行，表示组件已经被渲染并插入到页面中
2.const node=this.$mount().$el:$mount() 用于手动将vue实例挂在到DOM元素上。调用$mount()方法并获取其返回值的$el属性，将组件挂载到一个虚拟的DOM节点上
3.document.body.appendChild(node).document.body表示页面的<body>元素。appendChild()是用于将指定的节点添加到父节点的子节点列表的末尾。这里是将之前挂在的组件节点(node)添加到<body>元素中，实现将组件的内容插入到页面中的效果。

综合来说： 这段代码是将vue组件的内容渲染并插入到页面的<body>元素中，在组件的mounted钩子函数先将组件挂载到一个虚拟的DOM节点上，然后通过appendChild()方法将该节点添加到<body>元素中，使得组件的内容在页面中显示出来

方法2 在父元素上添加 `style="transform: none"`

解决方案：如果fixed的元素的父级元素有任意一个的 transform、perspective、filter 或 backdrop-filter不为空，则会基于这个容器而定位，而不是浏览器窗口了。
其中element-admin在切换tab的时候，会有一个动画效果，是基于transform来实现的。

  <div style="transform: none">
    <div class="pagination-class">
      <el-pagination
        small
        background
        :total="total"
        :page-size="per_num"
        layout="total,prev, pager, next"
        @current-change="handleCurrentChange"
        v-model:current-page="currentPage"
      ></el-pagination>
    </div>
  </div>