应用UI组件的移动端适配

在移动端开发应用UI组件也会遇到一系列需要注意的问题。

问题1

比如说，标签页是一个整体的组件，但是我们需要将标签页的标题和其他组件一起固定到顶部就要将标签页标题分离出来，这时候我们可以自己写一个样式在将标题分离，具体的代码：

// 组件
<van-sticky>
     <van-nav-bar title="列表" border></van-nav-bar>
     
     <div class="top">
         <div class="title" :class="{ active: active==0 }" @click="active=0">待审批</div>
         <div class="title" :class="{ active: active==1 }" @click="active=1">已审批</div>
     </div>
 </van-sticky>

 <to-do v-if="active==0"></to-do>
 <have-to-do v-if="active==1"></have-to-do>

//  数据
 export default {
	 data() {
        return {
            active: 0,
        }
	},
}

主要原理就是使用一个数据，例如active进行标记。点击不同的标题时，修改该数据标记的值，并且不同的标题在active标识激活后改变样式，并且切换不同的面板。

问题2

同时，以vant组件为例，这类组件自身用的单位是px，但是用作移动端适配，我们应该选择rem，所以要进行一下转换。

1.安装lib-flexible

安装命令

npm install lib-flexible --save

这个插件原理就是根据屏幕宽度的变化从而自动设置html根节点下的font-size大小。

2.在项目的入口引入lib-flexible

在main.js中添加：

import ‘lib-flexible’

3.安装postcss-px2rem-exclude

安装命令

npm install postcss-px2rem-exclude --save

这个插件在打包项目的时候将px像素转换为rem像素。

4.配置postcss.config.js

Vue3.0项目下默认没有这个文件,我们可以自己手动新建一个postcss.config.js文件。并填入相应的配置内容，如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem-exclude': {
    //37.5是根据Vant组件的设计稿是375得来的,lib-flexible插件默认是将375分为10等分,如果UI组件的设计稿是750,那么这里的设置就是填750/10=75
      remUnit: 37.5,
      exclude: /folder_name/i
    }
  }
}

接下来，启动项目就可以看到组件已经完成了移动端的适配。