关于应用UI组件的移动端适配方式
更新时间：2022年09月21日 09:11:50 作者：Serena_tz
这篇文章主要介绍了关于应用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
}
}
}接下来，启动项目就可以看到组件已经完成了移动端的适配。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目实现img的src动态赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
浅谈一下Vue生命周期中mounted和created的区别
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期,在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,那么这些过程中，具体vue做了些啥，我们今天来了解一下2023-05-05
这篇文章主要介绍了Vue中jsx不完全应用指南小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要大家介绍了查看当前vue项目所需Node.js版本的方法,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应组件的代码块，需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了使用Vite处理css less及postcss的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue 中 命名视图的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
Vite3结合Svelte3使用@import导入scss样式
这篇文章主要为大家介绍了Vite3结合Svelte3使用@import导入scss样式实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue数组中出现__ob__:Observer无法取值问题的解决方法
__ob__: Observer这个属性其实是Vue监控变量产生的,下面这篇文章主要给大家介绍了关于Vue数组中出现__ob__: Observer无法取值问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
这篇文章主要介绍了vue 动态组件(component :is) 和 dom元素限制(is)用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论