zoukankan      html  css  js  c++  java
  • iview的Affix组件滚动时没有按照预期固定

    业务场景

    新建任务的页面,创建和重置按钮,页面没有滚动时,直接跟在内容下面;页面滚动时,固定于页面下方,不随内容进行滚动,以方便按钮的操作。效果如下:

    问题以及解决办法

    直接使用<Affix :offset-bottom="40"></Affix> 图钉跟随页面滚动,并不能固定于底部
    目前原因未知,估测是此组件的bug。发现手动触发一次resize可解决此问题,代码如下:

    <template>
      <div>
        <Form>
          ···
          <FormItem>
            <Affix :offset-bottom="40">
              <Button type="primary">执行导出</Button>
              <Button>重置</Button>
            </Affix>
          </FormItem>
        </Form>
        ···
      </div>
    </template>
    
    <script>
    export default {
      name: "Config",
      methods: {
        initAffix() {
          if (!this.affixInit) {
            //affix组件有bug,需要触发一次resize事件才能正常
            this.affixInit = true;
            if (document.createEvent) {
              let event = document.createEvent("HTMLEvents");
              event.initEvent("resize", true, true);
              window.dispatchEvent(event);
            } else if (document.createEventObject) {
              window.fireEvent("onresize");
            }
          }
        }
      },
      mounted() {
        window.addEventListener("scroll", this.initAffix, true);
      },
      destroyed() {
        window.removeEventListener("scroll", this.initAffix, true);
      }
    };
    </script>
    
  • 相关阅读:
    [数据结构]二分查找
    [数据结构]堆排序
    [数据结构]冒泡排序
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
    android:hardwareAccelerated="true"
    Android 图形处理
    Android 屏幕适配
    Android 手机的屏幕分辨率大小汇总
    Android 模拟器常用的快捷键
    PopWindow的使用
  • 原文地址:https://www.cnblogs.com/XHappyness/p/12030321.html
Copyright © 2011-2022 走看看