H5開發規範與兼容

規範

骨架屏

.skeleton {
  background-image: linear-gradient(-45deg, #f5f5f5 40%, #fff 55%, #f5f5f5 63%);
  background-size: 400% 100%;
  background-position: 100% 50%;
  animation: skeleton-animation 2s ease infinite;
}

@keyframes skeleton-animation {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

複製代碼

export const skeleton = (data, otherClass)=> {
   return data ? ` ${otherClass}` : `skeleton ${otherClass}`
 }
複製代碼

<div :class="skeleton(true)"></div>

複製代碼

兼容

一. 通用

吸頂

• 菜單等組件吸頂建議使用 position:sticky; ,

使用條件：

• 父元素不能overflow:hidden或者overflow:auto屬性。
• 必須指定top、bottom、left、right4個值之一，不然只會處於相對定位
• 父元素的高度不能低於sticky元素的高度
• sticky元素僅在其父元素內生效

demo

<template>
 <div class="strcky__wrapper">
   <div class="strcky__content">
     StickyStickyStickyStickySticky
   </div>
   <div>
     還會滾動
   </div>
 </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {

  }
};
</script>
<style lang="stylus" scoped>
.strcky__wrapper {
  border 1px solid red
  height 1000px
}
.strcky__content {
  position sticky
  top 0
  height 50px
  border 1px solid  green
  background-color #fff
}
</style>
複製代碼

• scroll事件進行監聽scrollTop的值，而後改變爲 position: fixed; 也能夠實現，不過滾動過快會出現斷層。

雙層滾動

雙層滾動建議當彈框彈出時候設置body或者另外一層滾動設置 overflow: hidden; ，當彈框消失時設置 overflow: auto;

還能夠使用禁止事件冒泡實現，效果很差。

一像素邊框

安卓部分機型沒法顯示1px線，因此要放大再縮小,若是須要站位，建議使用兩個相同的div，一個不縮放，設置 visibility:hidden;

.border-1px {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  transform: scale(0.5);
  transform-origin: 0 0;
  border: 1px solid red;
}

複製代碼

頁面禁止選中

頁面禁止選中目前是經過 css 實現， 經過 js 經過監聽 contextmenu 事件只能在 PC 端實現，移動端有問題。

* {
  -webkit-touch-callout: none; /* 系統默認菜單被禁用 */
  -webkit-user-select: none; /* webkit瀏覽器 */
  -khtml-user-select: none; /* 早期瀏覽器 */
  -moz-user-select: none; /* 火狐瀏覽器 */
  -ms-user-select: none; /* IE瀏覽器 */
  user-select: none; /* 用戶是否可以選中文本 */
}

複製代碼

二. 安卓

文字 <11px 居中

app.vue

<template>
  <div id="app">
    <CenterText v-for="(item, index) in 10" :key="index" :props="centerTextProps" />
  </div>
</template>

<script>
import CenterText from "./components/CenterText.vue";

export default {
  name: "App",
  components: {
    CenterText,
  },
  data() {
    return {
      centerTextProps: {
        class: 'app-center-text-wrapper',
        text: "abcdefg123456789",
        fontSize: "22",
        height: "44",
        borderRadius: "12",
        color: "#239466",
        fontWeight: "700",
        borderWidth: "1",
      },
    };
  },
};
</script>

<style lang="stylus" scoped>
.app-center-text-wrapper {
  background-color: rgba(33,33,33,.3)
}
</style>

複製代碼

CenterText.vue

<template>
  <div
    :class="['center-text__wrapper',props.class]"
    :style="{ backgroundColor: props.backgroundColor , height }"
  >
    <div class="center-text__wrapper-box">
      <div
        class="center-text__content"
        :style="{ fontSize, color:props.color, fontWeight:props.fontWeight }"
      >{{props.text}}</div>
    </div>
    <div
      class="center-text__wrapper-after"
      :style="{ borderRadius, borderColor: props.borderColor, borderWidth, borderStyle: props.borderStyle }"
    />
  </div>
</template>

<script>
import { px2vw } from "@/util";
console.log(px2vw);
export default {
  props: {
    props: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      px2vw,
    };
  },
  computed: {
    height() {
      return px2vw(this.props.height);
    },
    fontSize() {
      return px2vw(this.props.fontSize, 2);
    },
    borderRadius() {
      return px2vw(this.props.borderRadius, 2);
    },
    borderWidth() {
      return px2vw(this.props.borderWidth, 2);
    },
  },
  mounted() {},
};
</script>

<style lang="stylus" scoped>
.center-text__wrapper {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  margin-right: 10px;
  padding: 0 10px;
  margin-bottom: 10px;
}

.center-text__wrapper-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.center-text__content {
  color: black;
  zoom: 0.5;
}

.center-text__wrapper-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  border: 1px solid red;
  border-radius: 15px;
}
</style>

複製代碼

util.js

export function px2vw(px, multiple) {
  if (!px) return '0';
  const val = parseFloat(px.toString() || '0');
  if (multiple) {
    return isNaN(val) ? '0' : `${Number((val / 7.5 * multiple).toFixed(3))}vw`;
  } else {
    return isNaN(val) ? '0' : `${Number((val / 7.5).toFixed(3))}vw`;
  }
 }
 
複製代碼

三. iOS

禁橫向滾動條

方法一實現時而有效時而無效，方法一,方法二同時使用

方法一：

::-webkit-scrollbar {
  width:0;
  height:0;
  opacity:0;
  display: none;
}

複製代碼

方法二： 讓父dom超出隱藏，子帶滾動條dom高度放大三倍，使滾動條超出父dom,被隱藏掉。

慣性滾動

-webkit-overflow-scrolling : touch;

複製代碼

禁止 dom 切換黑色陰影

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0) ;
  -webkit-tap-highlight-color: transparent; /* For some Androids */ 
}
複製代碼