关于应用UI组件的移动端适配方式

目录问题1问题21.安装lib-flexible2.在项目的入口引入lib-flexible3.安装postcss-px2rem-exclude4.配置postcss.config.js在移动端开发应...

目录

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

问题1

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

具体的代码：

// 组件
<van-sticky>
  <van-nav-bar title="列表" border></van-nav-bar>
  
  <div class="top">
    <div class="title" :class="{ active: active==0 }" @click="active=0">待审批</div&gjst;
    <div class="title" :class="{ active: active==1 http://www.cppcns.com}" @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-fjavascriptlexible --save

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

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

在main.js中添加：

import ‘lib-flexible'

3.安装postcss-px2rem-exclude

安装命令

npm install postcss-px2rem-excludpythone --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
  }
 }
}

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。