使用Flexible & swiper进行移动Web开发

米花儿团儿

移动端适配方案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会做以下几件事:

  1. *.html添加内联样式表

    • 只是reset一些样式
  2. <html>设置[data-dpr=""]属性、font-size 样式

    • [data-dpr=""]属性的作用:通过属性选择器,设置不同分辨率下的样式
    • font-size: 的作用:rem单位的基准尺寸
  3. 监听resizepageshow事件来重新设置html.style.fontSize
  4. 设置body.style.fontSize
  5. 定义window.lib.flexible

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

Note:HTML中无需设置meta#viewportflexible.js会根据window.devicePixelRatio的值自动添加meta#viewport

假设设置如下<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是你设置的值。

Note:在Flexible中,只对iOS设备进行dpr的判断,对于Android系列,始终认为其dpr为1

通过scss定义px2rem的转换

~在不使用自动化工具的基础上,无法使用以下处理方式,只能自己计算后再赋值~

@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屏幕下文本字号相同

我们希望在大屏手机上看到更多文本

不希望出现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;
      }

    参考文档

  • Flexible官方文档
  • viewport的介绍1
  • viewport的介绍2
  • iphone12适配
  • swiper相关配置
阅读 128

1.1k 声望
67 粉丝
0 条评论
你知道吗?

1.1k 声望
67 粉丝
宣传栏