关于应用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
}
}
}接下来，启动项目就可以看到组件已经完成了移动端的适配。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3 vscode插件volar配置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了vue开发之LogicFlow自定义业务节点,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
Vue 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，这篇文章主要介绍了vue的指令和插值总结,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了VueJs中customRef函数使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了antd table按表格里的日期去排序操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue组件通信的方式，这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多，本文将对vue组件通信方式进行一下总结，感兴趣的可以学习一下2021-12-12
vue使用$attrs和$listeners多级组件嵌套传递数据
这篇文章主要为大家介绍了vue使用$attrs和$listeners多级组件嵌套传递数据示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
今天小编就为大家分享一篇关于实例讲解v-if和v-show的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要为大家详细介绍了Vue+thinkphp5.1+axios实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要给大家介绍了关于如何重置vue打印变量显示方式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。2017-12-12
最新评论