IT廉连看——Uniapp——页面样式与布局

最新推荐文章于 2025-03-01 10:12:35 发布

IT廉连看

最新推荐文章于 2025-03-01 10:12:35 发布

阅读量2.6k

点赞数 34

文章标签： uni-app 前端框架 uniapp 前端 css

本文链接：https://blog.csdn.net/weixin_72932310/article/details/136311766

版权

IT廉连看——Uniapp——页面样式与布局

目标：

了解样式与布局的规范

熟记px和rpx的区别

全局样式与index样式的区别

一、查看uniapp框架简介——尺寸单位

px尺寸单位的使用是贯穿始终的。

[IT廉连看]

二、尺寸单位——实操效果

1、打开Hbuilder X并进入index.vue页面

2、删除初始化代码

3、删除date中保存的数据

4、删除样式

5、删除后运行至微信开发者工具查看效果</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT廉连看

关注关注

34
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uni-app - 样式

asfcyg的博客

05-30

645

1、支持rpx（小程序样式单位），即响应式px，一种根据屏幕宽度自适应的动态单位，以750宽的屏幕为基准，即750rpx为屏幕宽度，375rpx为屏幕的一半 2、使用@import导入外联样式表 3、在当前页面填写的样式即为当前页面的样式（局部样式），不必加scope，在App.vue中添加的样式为全局样式，局部样式会覆盖全局样式 4、支持基本常用的选择器，例如class\id等等，不支持 * 选择器 5、添加字体图标字体文件的引用推荐使用-@开头的绝对路径使用字体图标的步骤 1）将字体图标的css文件

uni-app中的样式

atu1111的博客

07-21

3140

uni-app中的样式 1.uni-app屏幕宽度自适应的动态单位rpx rpx 即响应式px，一种根据屏幕宽度自适应的动态单位 rpx 官方建议：开发微信小程序时，设计师可以用 iPhone6 375 667作为视觉稿的标准 iphone5 320 568 320/750=0.42px ipone6 375 667 375/750 = 0.5px ipone6plus 414 736 414/750= 0.552px 实现等比例放大缩小的原理，就是划分750等分，每一份就是r

参与评论您还未登录，请先登录后发表或查看评论

uniapp 系统学习，从入门到实战（六）—— 样式与布局

小那同学的博客

03-01

1363

通过合理运用 Flex布局实现灵活界面设计，结合rpx 单位媒体查询完成跨端适配，再借助 SCSS 变量+混合宏提升样式复用率，开发者可以显著提升UniApp项目的开发效率和代码质量。建立统一的 SCSS变量库制作响应式断点配置表开发可复用的Flex布局组件定期进行样式性能检测。

uni-app的页面样式与布局

2302_77270471的博客

06-13

892

uni-app规定屏幕基准宽度为750rpx。开发者可以通过设计稿基准宽度计算页面元素rpx值，设计稿1px与框架样式1rpx的转换公式为：设计稿1px÷设计稿基准宽度=框架样式1rpx÷750rpx。（1）若设计稿宽度为750px，元素A在设计稿上的宽度为100px，那么元素A在uni-app中的宽度应该设为750×100÷750，结果为100rpx。（2）若设计稿宽度为640px，元素A在设计稿上的宽度为100px，那么元素A在uni-app中的宽度应该设为750×100÷640，结果为117rpx。

《uniapp跨平台开发》学习心得体会

wly29的博客

06-02

496

DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。点击【发行】按钮之后，会自动启动微信开发者工具，点击【上传】按钮。

uni-app小程序开发实战 | (从零设计一款个人中心页面，最详细)

独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)

05-30

6757

个人中心页面很常用，几乎每个app里面都少不了。同时个人中心页也较简单，可以作为UI项目练手，熟悉常用UI界面的设计和flex布局。这里分享下一款简约的个人中心页面，并详细介绍从零的实现过程，分享给有需要的小伙伴，需要的可以收藏。

shopping_pro:uniapp ————————————商城模版

03-18

"shopping_pro:uniapp ————————————商城模版" 是一个基于 UniApp 开发的电商应用模板，旨在帮助开发者快速构建自己的在线购物平台。UniApp 是一个使用 Vue.js 开发的多端框架，它允许开发者编写一次代码...

关于我们-VUE模板 UNIAPP模板布局、样式、JS分离

04-02

关于“关于我们-VUE模板 UNIAPP模板布局、样式、JS分离”这个主题，我们探讨的是一个基于Vue.js的前端开发框架——UniApp，它是一个用于构建多端应用的统一开发平台。Vue.js是一个轻量级的、声明式的JavaScript框架...

【重点突破】—— UniApp 微信小程序开发官网学习One

柳柳66的博客

11-28

746

一、初步认识 uni-app官网：https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址： http://www.dcloud.io/hbuilderx.html 选择版本：下载App开发版，可开箱即用；如使用cli方式创建项目，可直接下载标准版创建uni-app: 工具栏里的文件 -> 新...

【重点突破】—— UniApp 微信小程序开发官网学习Two

柳柳66的博客

11-28

526

一、使用Vue.js注意事项 Vue.js在uni-app中使用的差异：新增：uni-app除了支持Vue实例的生命周期，还支持应用启动、页面显示等生命周期受限：发布到H5时支持所有vue的语法，在小程序和App端部分功能受限生命周期：Vue实例生命周期+应用生命周期+页面生命周期使用uni-app的onReady ：代替vue的mounted 使用uni-ap...

uni-app 页面样式

m0_58492934的博客

06-14

5683

uni-app 支持的通用 css 单位包括 px、rpxvue页面支持普通H5单位，但在nvue里不支持：nvue还不支持百分比单位。App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpxnvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：下面对 rpx 详细说明：设计师在提供设计图时，一般只提供一个

【UniApp】-uni-app全局样式和局部样式

Reische的博客

12-13

2638

好，经过上个章节的介绍完毕之后，了解了一下 UniApp 的一个全局页面配置文件，也就是我们的一个pages.json文件。那么了解完了这个文件之后，这片文章，再了解一下 UniApp 的一个全局样式和我们的局部样式。

九、uni-app 页面布局

汪学友的博客

10-18

642

scss 规范，rpx 在iphone6/7/8 中宽度为750，2rpx = 1px <style lang="scss"> @import "./news.css";//加载别的css文件 .f1{ font-size: 50rpx; .c3{ background-color: red; } } </style>

uniapp页面布局

qq_44871531的博客

09-06

2113

常用的uniapp、vue页面布局

uni-app适配布局参考

m0_73075579的博客

03-07

2634

1.微信小程序+使用原生导航栏。2.微信小程序+不使用导航栏。3.微信小程序+自定义导航栏。

uniapp页面样式和布局和nvue教程详解

前端开发工程师

11-20

3052

本教程将深入介绍 uni-app 页面的样式与布局技巧，以及 nvue 技术的使用方法。从基础的尺寸单位如 rpx 的理解与应用，到复杂的 Flex 布局策略，再到 nvue 与 Vue 页面之间的通信机制，我们将一步步带领读者掌握这些关键技能。此外，我们还会探讨如何利用 uni-app 提供的内置 CSS 变量优化用户体验，以及如何通过条件编译等高级特性实现更加灵活的跨平台开发。无论你是刚接触 uni-app 的新手，还是希望深入了解其高级特性的资深开发者，都能从本教程中获得宝贵的知识与灵感。

uniapp ----样式整合（随意自用版）

heavenz19的博客

10-18

570

uniapp ----样式整合（随意版）

浅谈uniapp的flex布局

最新发布

03-08

### 如何在 UniApp 中实现 Flex 布局 #### 使用基础属性构建简单布局为了创建一个简单的水平排列项目列表，可以在父容器上应用 `display: flex` 和 `flex-direction: row` 属性[^1]。 ```css .container { display: flex; flex-direction: row; } ``` 对于子项，默认情况下会沿主轴（即行方向）分布。如果希望调整项目的对齐方式或改变它们之间的间距，则可以通过设置额外的 CSS 属性如 `justify-content`, `align-items` 来控制[^2]。 #### 利用 uni-app-plus-flexible 插件加速开发过程考虑到实际应用场景可能更加复杂，推荐使用专门针对 UniApp 设计的 `uni-app-plus-flexible` 插件来简化操作流程并提高效率。安装此插件之后，能够更方便地处理响应式设计需求以及不同屏幕尺寸下的适配问题。 #### 实现具体案例——两栏自适应宽度布局下面给出一段完整的 HTML 结构与样式定义作为实例说明： ```html <template> <view class="wrapper">  <view class="side-bar">Side Bar</view>  <view class="main-content">Main Content Area</view> </view> </template> <style scoped lang="scss"> .wrapper { display: flex; .side-bar { width: 200px; /* 设置左侧边栏的具体宽度 */ background-color: lightblue; } .main-content { flex-grow: 1; /* 让主要内容区自动填充可用的空间 */ padding-left: 20px; background-color: lavender; } } </style> ``` 上述代码片段展示了如何通过指定 `.side-bar` 的绝对宽度，并让`.main-content` 自动扩展以填满其余部分的方式建立了一个经典的双列布局结构[^3]。 #### 动态内容展示优化方案当涉及到动态加载的数据时，比如图片轮播等功能模块，可以考虑将 Swiper 组件同 Flexbox 技术相结合起来使用。这不仅有助于增强视觉表现力，同时也便于管理页面内的交互逻辑[^4]。 ```javascript // JavaScript (Vue Component Script Section) export default { data() { return { swiperItems: [ 'Image URL 1', 'Image URL 2', 'Image URL 3' ] }; }, methods: { handleSwiperChange(e) { console.log('Current index:', e.detail.current); } } }; ``` ```html  <swiper :indicator-dots="true" @change="handleSwiperChange"> <block v-for="(item, index) in swiperItems" :key="index"> <swiper-item> <image mode="aspectFill" :src="item"></image> </swiper-item> </block> </swiper> ``` ```css /* WXSS Style Definition */ .swiper-container { height: 200px; } swiper image { width: 100%; height: 100%; } ``` 以上就是关于如何利用 Flex Layout 构建高效灵活的 UI 接口的一些指导原则和技术要点介绍，在实践中可以根据具体的业务场景做适当调整和改进。