使用Flexible & swiper進行移動Web開發

時間 2021-06-16

標籤 css html vue node git github 正則表達式 npm api less 欄目 Flex 简体版

原文原文鏈接

移動端適配方案`flexible.js`

引入flexible.js

在 *.html的 <head>標籤中引入 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

flexible.js會作如下幾件事：css

給*.html添加內聯樣式表html
- 只是reset一些樣式
給<html>設置[data-dpr=""]屬性、font-size 樣式vue
- [data-dpr=""]屬性的做用：經過屬性選擇器，設置不一樣分辨率下的樣式
- font-size: 的做用：rem單位的基準尺寸
監聽resize、pageshow事件來從新設置html.style.fontSize
設置body.style.fontSize

定義window.lib.flexiblenode

window.lib.flexible = {
  dpr: number,
  refreshRem: function,
  rem2px: function,
  px2rem: function
}

Note：HTML中無需設置meta#viewport，flexible.js會根據window.devicePixelRatio的值自動添加meta#viewport。git

假設設置以下<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">，無論設備是多少的dpr，flexible.js再也不修改該元數據配置，都會強制認爲其dpr是你設置的值。github

Note：在Flexible中，只對iOS設備進行dpr的判斷，對於Android系列，始終認爲其dpr爲1正則表達式

經過`scss`定義px2rem的轉換

~在不使用自動化工具的基礎上，沒法使用如下處理方式，只能本身計算後再賦值~npm

@function px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

文本字號不建議使用`rem`

咱們但願文本在不一樣dpr屏幕下文本字號相同api

咱們但願在大屏手機上看到更多文本less

不但願出現13px和15px這樣的奇葩尺寸

解決方案

文本仍是使用px做爲單位，只不過使用[data-dpr]屬性來區分不一樣dpr下的文本字號大小

~在不使用自動化工具的基礎上，沒法使用如下處理方式，只能本身計算後再賦值~

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

@include font-dpr(16px);

補充知識點

flexible.js使用document.readyState API獲取document的加載狀態

document.addEventListener('readystatechange', event => {
if (event.target.readyState === 'interactive') {
  // 等同於DOMContentLoaded 事件
}
else if (event.target.readyState === 'complete') {
  // 表示 load 狀態的事件即將被觸發。
  // 等同於loaded
}
});

在`Vue`項目中的實戰

~項目由@vue/cli@4.5.13建立的~

移動端適配

引入`flexible`

安裝lib-flexible
```
npm i -D lib-flexible
```

項目中引入flexible

# main.js
  import "lib-flexible/flexible";

樣式`px`自動轉`rem`

安裝postcss-plugin-px2rem
```
npm i -D postcss-plugin-px2rem
```

建立.postcssrc.js

# .postcssrc.js
  module.exports = {
    plugins: {
      'postcss-plugin-px2rem': {
        rootValue: 108, //換算基數，設計圖尺寸， 默認100 
        exclude: /(node_module)/, //默認false，能夠（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)\/
        mediaQuery: false, //（布爾值）容許在媒體查詢中轉換px。
        minPixelValue: 3, //設置要替換的最小像素值(3px會被轉rem)。 默認 0
      }
    }
  }

凡事有例外
若不想轉換rem，單位使用全大寫PX，如字體

# presets.scss
  $largeFont: 40PX;
  $middleFont: 20PX;
  $standardFont: 14PX;
  $smallFont: 10PX;
  @mixin font-dpr($font){
    font-size: $font;
  
    [data-dpr="2"] & {
        font-size: $font * 2;
    }
  
    [data-dpr="3"] & {
        font-size: $font * 3;
    }
  }

# example.scss
...
  @import "../../assets/scss/preset";
  .page-title{
    @include font-dpr($standardFont);
  }
...

規範提交記錄

經過如下命令@vue/cli會自動安裝commitlint插件並更新pkg

vue add commitlint

`swiper`應用

安裝依賴

npm install swiper vue-awesome-swiper --save

全局註冊

# main.js
  ...
  import VueAwesomeSwiper from "vue-awesome-swiper";
  import "swiper/swiper.scss";
  
  Vue.use(VueAwesomeSwiper, {});
  ...

邏輯應用

# Example.vue
  <template>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="i in 5">
          <div>
              Slide {{i}}
          </div>
          <button @click="handleClickItem(i)">點擊後纔可滑動</button>
      </swiper-slide>
    </swiper>
  </template>
  <script>
  export default {
    name: "Example",
    data() {
      return {
        swiperOptions: {
          direction: "vertical",
        },
      };
    },
    methods: {
      handleClickItem(idx) {
        // 知足某條件後可滑動
        this.swiper.allowSlideNext = true;
      },
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      },
    },
    mounted() {
      // 默認禁止滑動翻頁
      this.swiper.allowSlidePrev = false;
      this.swiper.allowSlideNext = false;
      // 翻頁後禁止翻頁
      this.swiper.on("slideChange", () => {
        this.swiper.allowSlideNext = false;
        this.currentIdx = this.swiper.activeIndex;
      });
    },
  };
  </script>

樣式

# example.scss
  .swiper {
    &- {
      &container {
        height: 100%;
      }
  
      &slide {
        height: 100%;
        color: white;
      }
    }
  }
  button {
    position: absolute;
    z-index: 100;
    bottom: 20PX;
    width: 100%;
    text-align: center;
  }