当前位置: 首页 > news >正文

uniApp中uView组件库的丰富布局方法

目录

基本使用

#分栏间隔

#混合布局

#分栏偏移

#对齐方式

API

#Row Props

#Col Props

#Row Events

#Col Events


UniApp的uView组件库是一个丰富的UI组件库,提供了各种常用的UI组件和布局方法,帮助开发者快速构建美观、灵活的界面。下面给你写一篇关于uView组件库的布局方法的博客:

基本使用

通过col组件的span设置需要分栏的比例

<template><view class="u-page"><view class="u-demo-block"><text class="u-demo-block__title">基础使用</text><view class="u-demo-block__content"><u-row customStyle="margin-bottom: 10px"><u-col span="6"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="6"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row customStyle="margin-bottom: 10px"><u-col span="4"><view class="demo-layout bg-purple"></view></u-col><u-col span="4"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="4"><view class="demo-layout bg-purple-dark"></view></u-col></u-row><u-row justify="space-between"><u-col span="3"><view class="demo-layout bg-purple"></view></u-col><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="3"><view class="demo-layout bg-purple"></view></u-col><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col></u-row></view></view></view>
</template><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>

#分栏间隔

通过设置row组件的gutter参数,来指定每一栏之间的间隔(最终表现为左边内边距各为gutter/2),默认间隔为0

<view class="u-demo-block__content"><u-rowjustify="space-between"gutter="10"><u-col span="3"><view class="demo-layout bg-purple"></view></u-col><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="3"><view class="demo-layout bg-purple"></view></u-col><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col></u-row>
</view><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>

#混合布局

通过指定col组件的span属性,指定不同的值,达到不同的比例

<view class="u-demo-block__content"><u-rowjustify="space-between"gutter="10"><u-col span="2"><view class="demo-layout bg-purple-light"></view></u-col><u-col span="4"><view class="demo-layout bg-purple"></view></u-col><u-col span="6"><view class="demo-layout bg-purple-dark"></view></u-col></u-row>
</view><style lang="scss">.wrap {padding: 12px;}.demo-layout {height: 25px;border-radius: 4px;}.bg-purple {background: #CED7E1;}.bg-purple-light {background: #e5e9f2;}.bg-purple-dark {background: #99a9bf;}
</style>

#分栏偏移

通过指定col组件的offset属性可以指定分栏偏移的栏数。

<view class="u-demo-block__content"><u-rowjustify="space-between"customStyle="margin-bottom: 10px"><u-colspan="3"offset="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"offset="3"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"offset="3"><view class="demo-layout bg-purple"></view></u-col></u-row>
</view>

#对齐方式

通过row组件的justify来对分栏进行灵活的对齐, 可选值为start(或flex-start)、end(或flex-end)、centeraround(或space-around)、between(或space-between), 其最终的表现类似于css的justify-content属性。

注意:由于持微信小程序编译后的特殊结构,此方式不支持微信小程序。

<view class="u-demo-block__content"><u-rowjustify="space-between"customStyle="margin-bottom: 10px"><u-colspan="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"><view class="demo-layout bg-purple"></view></u-col></u-row><u-row><u-col span="3"><view class="demo-layout bg-purple-light"></view></u-col><u-colspan="3"><view class="demo-layout bg-purple"></view></u-col></u-row>
</view>

API

#Row Props

参数说明类型默认值可选值
gutter栅格间隔,左右各为此值的一半,单位任意String | Number0-
justify水平排列方式(微信小程序暂不支持)Stringstart(或flex-start)end(或flex-end) / center / around(或space-around) / between(或space-between)
align垂直排列方式Stringcentertop / bottom

#Col Props

参数说明类型默认值可选值
span栅格占据的列数,总12等分String | Number01-12
offset分栏左边偏移,计算方式与span相同String | Number0-
justify水平排列方式Stringstartstart(或flex-start)、end(或flex-end)、centeraround(或space-around)、between(或space-between)
align垂直对齐方式Stringstretchtopcenterbottomstretch
textAlign文字水平对齐方式Stringleftcenter / right

#Row Events

事件名说明回调参数
clickrow被点击-

#Col Events

事件名说明回调参数
clickcol被点击,会阻止事件冒泡到row-

总的来说,uView组件库提供了丰富的布局方法和UI组件,可以帮助UniApp开发者快速构建出美观、灵活的界面布局,提升开发效率,为用户提供更加舒适的交互体验。开发者可以根据项目需求选择合适的uView组件,轻松实现各种复杂的布局效果。

相关文章:

uniApp中uView组件库的丰富布局方法

目录 基本使用 #分栏间隔 #混合布局 #分栏偏移 #对齐方式 API #Row Props #Col Props #Row Events #Col Events UniApp的uView组件库是一个丰富的UI组件库&#xff0c;提供了各种常用的UI组件和布局方法&#xff0c;帮助开发者快速构建美观、灵活的界面。下面给你写一…...

TDD-LTE 寻呼流程

目录 1. 寻呼成功流程 1.1 空闲态寻呼 1.2 连接态寻呼 2. 寻呼失败流程 2.1 Paging消息不可达 2.2 RRC建立失败 2.3 eNodeB未上发Initial UE message或达到超时 1. 寻呼成功流程 1.1 空闲态寻呼 寻呼成功&#xff1a;MME发起寻呼&#xff08;S1 接口发送Paing 消息&…...

TCP中的三次握手和四次挥手

TCP中的连接和断开可以说是在面试中经常被问到的问题之一&#xff0c;正好有空就总结一下&#xff0c;首先回顾一下TCP的相关知识点 1. TCP的基础知识 1.1 TCP的基本概念 我们知道TCP是运输层的面向连接的可靠的传输协议。面向连接的&#xff0c;指的就是在两个进程发送数据…...

NAO.99b海潮模型的详解教程

NAO.99b模型是由日本国家天文台开发的全球潮汐模式&#xff0c;基于二维非线性浅水方程。该模型具有较高的分辨率&#xff0c;网格间距为0.50.5&#xff0c;网格数为720360&#xff0c;覆盖的经度范围为0.25&#xff5e;359.75E&#xff0c;纬度范围为89.75S&#xff5e;89.75N…...

Plantuml之JSON数据语法介绍(二十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

迅为龙芯2K1000开发板虚拟机 ubuntu 更换下载源

Ubuntu 系统软件的下载安装我们通常使用命令“apt-get” &#xff0c; 该命令可以实现软件自动下载&#xff0c; 安装&#xff0c; 配置。 该命令采用客户端/服务器的模式&#xff0c; 我们的 Ubuntu 系统作为客户端&#xff0c; 当需要下载软件的时候就向服务器发起请求&#…...

你好!Apache Seata

北京时间 2023 年 10 月 29 日&#xff0c;分布式事务开源项目 Seata 正式通过 Apache 基金会的投票决议&#xff0c;以全票通过的优秀表现正式成为 Apache 孵化器项目&#xff01; 根据 Apache 基金会邮件列表显示&#xff0c;在包含 13 个约束性投票 (binding votes) 和 6 个…...

RFC6749-OAuth2.0

前言 最近在项目中需要实现SSO(单点登录)功能,以实现一处注册,即可在任何平台之间登录的功能。我们项目中并没有直接对接第三方认证系统而是通过集成keycloak 完成一系类安全协议的对接工作。如果我们在代码级别自己完成各种安全协议的对接是一项十分大的工程。不仅要走统一的…...

【代码解析】代码解析之生成token(1)

本篇文章主要解析上一篇&#xff1a;代码解析之登录&#xff08;1&#xff09;里的第8行代码调用 TokenUtils 类里的genToken 方法 https://blog.csdn.net/m0_67930426/article/details/135327553?spm1001.2014.3001.5501 genToken方法代码如下&#xff1a; public static S…...

牛客网SQL训练5—SQL大厂面试真题

文章目录 一、某音短视频1.各个视频的平均完播率2.平均播放进度大于60%的视频类别3.每类视频近一个月的转发量/率4.每个创作者每月的涨粉率及截止当前的总粉丝量5.国庆期间每类视频点赞量和转发量6.近一个月发布的视频中热度最高的top3视频 二、用户增长场景&#xff08;某度信…...

kubeadm来搭建k8s集群。

我们采用了二进制包搭建出的k8s集群&#xff0c;本次我们采用更为简单的kubeadm的方式来搭建k8s集群。 二进制的搭建更适合50台主机以上的大集群&#xff0c;kubeadm更适合中小型企业的集群搭建 主机配置建议&#xff1a;2c 4G 主机节点 IP …...

【java爬虫】使用element-plus进行个股详细数据分页展示

前言 前面的文章我们讲述了获取详细个股数据的方法&#xff0c;并且使用echarts对个股的价格走势图进行了展示&#xff0c;本文将编写一个页面&#xff0c;对个股详细数据进行展示。别问涉及到了element-plus中分页的写法&#xff0c;对于这部分知识将会做重点讲解。 首先看一…...

Python使用余弦相似度比较两个图片

为了使用余弦相似度来找到与样例图片相似的图片&#xff0c;我们需要先进行一些预处理&#xff0c;然后计算每两张图片之间的余弦相似度。以下是一个简单的实现&#xff1a; 读取样例图片和目标文件夹中的所有图片。对每张图片进行预处理&#xff0c;例如灰度化、降噪等。计算…...

树莓派4B-Python使用PyCharm的SSH协议在电脑上远程编辑程序

目录 前言一、pycharm的选择二、添加SSH的解释器使用总结 前言 树莓派的性能始终有限&#xff0c;不好安装与使用高级一点的程序编辑器&#xff0c;如果只用thonny的话&#xff0c;本人用得不习惯&#xff0c;还不如PyCharm&#xff0c;所以想着能不能用电脑中的pycharm来编写…...

Servlet的自动加载、ServletConfig对象、ServletContext对象

一、 Servlet的自动加载 默认情况下&#xff0c;第一次访问servlet的时候&#xff0c;创建servlet对象。如果servlet构造函数里面的代码或者init方法里面的代码比较多&#xff0c;就会导致用户第一次访问servlet的时候比较慢。这个时候&#xff0c;我们可以改变servlet对象的创…...

Vue - Class和Style绑定详解

1. 模板部分 <template><div><!-- Class 绑定示例 --><div :class"{ active: isActive, text-danger: hasError }">Hello, Vue!</div><!-- Class 绑定数组示例 --><div :class"[activeClass, errorClass]">Cla…...

适用于 Windows 的 7 个顶级视频转换器 – 流畅的视频转换体验!

对于任何想要增强视频转换体验的人来说&#xff0c;视频转换器都是必不可少的工具。无论您是需要转换视频文件格式以实现兼容性&#xff0c;还是只是想优化视频以获得更好的质量&#xff0c;可靠的视频转换器都可以使该过程无缝且高效。在这篇博文中&#xff0c;我们将探讨适用…...

Vue3全局属性app.config.globalProperties

文章目录 一、概念二、实践2.1、定义2.2、使用 三、最后 一、概念 一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。点击【前往】访问官网 二、实践 2.1、定义 在main.ts文件中设置app.config.globalPropertie import {createApp} from vue import ElementPl…...

单片机开发--keil5

一.keil5 Keil uVision5是一个集成开发环境&#xff08;IDE&#xff09;&#xff0c;用于对嵌入式系统中的微控制器进行编程。它是一个软件套件&#xff0c;包括源代码编辑器、项目经理、调试器以及微控制器开发、调试和编程所需的其他工具。Keil uVision5 IDE主要用于对基于A…...

<JavaEE> TCP 的通信机制(三) -- 滑动窗口

目录 TCP的通信机制的核心特性 四、滑动窗口 1&#xff09;什么是滑动窗口&#xff1f; 2&#xff09;滑动窗口的作用是什么&#xff1f; 3&#xff09;批量传输出现丢包如何处理&#xff1f; 1> 接收端ACK丢包 2> 发送端数据包丢包 4&#xff09;适用性 TCP的通…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...