前端小问题记录/功能

[fangmd]

关于长列表

https://zhuanlan.zhihu.com/p/26022258

场景1 类似抖音整页上下滑动列表

方案：判断当前 index, 只显示当前 index 和上下页面，其他页面加载空 div 站位.

item.visibile; item 增加个属性，控制是否真实渲染 html 

[fangmd]

已一次 Swiper 覆盖元素问题

Banner 使用 Swiper 实现，banner 上面覆盖有其他元素情况下，有其他元素覆盖 Banenr，但是覆盖效果有时候失效。

在 iOS 问题尤其严重

问题原因：transform:translate3d 影响元素层级

在做一个移动端项目时，用swiper 做的页面切换，但是页面里面还会有swiper轮播图 和其他内容，在滑动外部swiper时，除开里面swiper的元素会发生闪动的情况。

解决方法：给外部元素的父标css套一个：transform:translate3d(0,0,0);overflow:hidden;

闪动元素/子元素：transform:translate3d(0,0,0)

这样就解决了页面闪动的问题

作者：kangaroo_v 链接：https://www.jianshu.com/p/bd74d228f3d7 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[fangmd]

加载更多功能失效

问题原因：scrollTop 值获取需要做个兼容

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;

[fangmd]

有弹框的情况下，禁止背景滚动

import { lock, unlock } from 'tua-body-scroll-lock';

[fangmd]

Android 下 H5 滚动条消失问题

less 语法，加载滚动div上

// less
                &::-webkit-scrollbar {
                    height: 8px; /* At least not zero */
                    width: 2px;
                }

                &::-webkit-scrollbar-thumb {
                    background-color: rgba(0, 0, 0, 0.3); /* Or any other instruction making the element visible */
                }

[fangmd]

头固定布局

<template>
  <div class="Test__root">
    <div class="inner">
      <div class="left">
        <div class="left-column">
          <div class="item-header">menu - 1</div>
          <div class="item">content - 1</div>
          <div class="item">content - 2</div>
          <div class="item">content - 3</div>
          <div class="item">content - 4</div>
          <div class="item">content - 5</div>
          <div class="item">content - 6</div>
          <div class="item">content - 3</div>
          <div class="item">content - 4</div>
          <div class="item">content - 5</div>
        </div>
        <div class="left-column">
          <div class="item-header">menu - 2</div>
          <div class="item">content - 1</div>
          <div class="item">content - 2</div>
          <div class="item">content - 3</div>
          <div class="item">content - 4</div>
          <div class="item">content - 5</div>
          <div class="item">content - 6</div>
          <div class="item">content - 3</div>
          <div class="item">content - 4</div>
          <div class="item">content - 5</div>
        </div>
      </div>
      <div class="right">
        <div class="header">header</div>
        <div class="svg">content</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  setup() {}
}
</script>

<style lang="scss" scoped>
.Test__root {
  position: relative;
  height: 300px;
  overflow: scroll;

  .inner {
    display: flex;
    flex-direction: row;

    .left {
      position: sticky;
      left: 0;
      z-index: 20;
      display: flex;
      flex-direction: row;

      .left-column {
        .item-header {
          position: sticky;
          top: 0;
          width: 100px;
          height: 80px;
          line-height: 80px;
          border: 1px solid #fff;
          background: rgb(255, 207, 207);
        }
        .item {
          width: 100px;
          height: 80px;
          line-height: 80px;
          border: 1px solid #fff;
          background: rgb(239, 239, 239);
        }
      }
    }

    .right {
      flex: 1;
      z-index: 10;
      .header {
        position: sticky;
        top: 0;
        width: 1200px;
        height: 80px;
        background: rgb(255, 207, 207);
      }
      .svg {
        height: 720px;
        width: 1200px;
        background: rgb(214, 255, 215);
      }
    }
  }
}
</style>

[fangmd]

Vue/React 如何修改外部组件的样式同时不影响其他页面的样式

vue

import { onMounted, onUnmounted } from '@vue/composition-api'

export const useTableFilter = ({ customClass }) => {
  onMounted(() => {
    setTimeout(() => {
      document.body.classList.add(customClass)
    }, 10)
  })

  onUnmounted(() => {
    document.body.classList.remove(customClass)
  })
}

vue hooks 的写法，这里直接给 body 动态添加一个自定义的 class， 组件销毁的时候去掉 class。当前组件只需要给自定义 class 添加样式就可以了。