【快应用】折叠屏展开与折叠判断案例

 问题背景：

快应用在折叠屏手机上使用时，当展开或者折叠时，快应用的样式如果是固定的，在展开后会变得异常，这个应该如何去适配呢？

解决方案：可以的，快应用中提供了onConfigurationChanged来监听应用配置的改变，其中的foldScreenMode属性就是屏幕的物理大小改变（如折叠屏折叠/展开）时触发。当这个参数返回时，可以调用device.getInfoSync()接口根据返回的screenWidth来判断是展开还是折叠，并以此来设置不同的样式属性。

<template>

  <!-- Only one root node is allowed in template. -->

  <div class="container" style="flex-direction: column">

    <input type="button" value="hello" />

  </div>

</template>

 

<style 

  lang="sass" >

</style>

 

<script>

  import device from '@system.device';

  module.exports = {

    data: {

      width: 0

    },

    onShow(options) {

      const res = device.getInfoSync();

      //先获取折叠屏折叠的宽度

      this.width = res.screenWidth

      console.log("width:", this.width);

    },

    onConfigurationChanged(e) {

      if (e.type === "foldScreenMode") {

        try {

          //判断宽度的大小决定是展开还是折叠

          const res = device.getInfoSync();

          console.log("res.screenwidth:", res.screenWidth);

          //返回的宽度与折叠的宽度对比

          if (res.screenWidth === this.width) {

            //设置折叠时的样式

            console.log("当前是折叠态");

          } else {

            //设置展开时样式

            console.log("当前是展开态");

          }

        } catch (e) {

          console.log(e.code + e.message);

        }

      }

    }

  }

</script>