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-row
            justify="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-row
        justify="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-row
            justify="space-between"
            customStyle="margin-bottom: 10px"
    >
        <u-col
                span="3"
                offset="3"
        >
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="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-col
                span="3"
                offset="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </u-row>
</view>

#对齐方式

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

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

<view class="u-demo-block__content">
    <u-row
            justify="space-between"
            customStyle="margin-bottom: 10px"
    >
        <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-row>
    <u-row>
        <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-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)、center、around(或space-around)、between(或space-between)
align垂直对齐方式Stringstretchtop、center、bottom、stretch
textAlign文字水平对齐方式Stringleftcenter / right

#Row Events

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

#Col Events

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/274646.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

(windows2012共享文件夹和防火墙设置

(windows2012共享文件夹和防火墙设置

windows2012共享文件夹和防火墙设置 1.windows2012文件夹共享1.共享和高级共享的区别![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0d815cc6862a4c7a99be11442fb5d950.png#pic_center) 2.windows的防火墙设置1.防火墙设置8080端口让tomot可以在主机可以访问1.新建…
阅读更多...
Switch语句与链接—计算机系统基础

Switch语句与链接—计算机系统基础

实验内容&#xff1a;修改二进制可重定位目标文件“phase1.o”中相关节的内容&#xff08;注意不允许修改.text节和重定位节的内容&#xff09;&#xff0c;使其与main.o模块如下链接后运行时输出目标字符串“123456789” gcc -no-pie -o linkbomb main.o phase1.o ./linkbomb…
阅读更多...
Pandas的datetime数据类型

Pandas的datetime数据类型

Python的datetime对象 Python内置了datetime对象&#xff0c;可以在datetime库中找到 from datetime import datetime now datetime.now() now 还可以手动创建datetime t2 datetime(2023,4,21) now-t2 # datetime.timedelta(days251, seconds31427, microseconds546921)将…
阅读更多...
C# WPF上位机开发（MVVM模式开发）

C# WPF上位机开发（MVVM模式开发）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 学习过vue的同学都知道mvvm这个名词。从字面上理解&#xff0c;可能有点拗口&#xff0c;但是我们可以去理解一下它的优点是什么。mvc相信大家都明…
阅读更多...
生产系统稳定上线600天！中国联通CUDB for OceanBase的开源共建和规模化应用

生产系统稳定上线600天！中国联通CUDB for OceanBase的开源共建和规模化应用

中国联通软件研究院架构部平台承载了上千应用的数据库需求&#xff0c;并且现存大量数据库使用过程缺少规范、缺少监控&#xff0c;同时还存在着数据库核心技术相关风险。为了实现核心技术自主可控&#xff0c;及时为用户解决线上问题、满足用户的功能需求&#xff0c;提供物美…
阅读更多...
GIT提交、回滚等基本操作记录

GIT提交、回滚等基本操作记录

1、add文件时warning: LF will be replaced by CRLF in .idea/workspace.xml. 原因&#xff1a;windows中的换行符为 CRLF&#xff0c; 而在Linux下的换行符为LF&#xff0c;所以在执行add . 时会出现以下提示 解决&#xff1a;git config core.autocrlf false 2、GIT命令&…
阅读更多...
【数据库系统概论】第4章-数据库安全性

【数据库系统概论】第4章-数据库安全性

复习用&#xff0c;别看了 文章目录 4.1 计算机安全性概述4.2 数据库安全性控制4.2.1 用户标识和鉴定4.2.2 存取控制4.2.3 自主存取控制方法4.2.4 数据库角色4.2.5 强制存取控制 4.3 视图机制4.4 审计4.5 数据加密4.6 其他安全性保护 4.1 计算机安全性概述 不安全因素 4.2 …
阅读更多...
gin框架使用系列之五——表单校验

gin框架使用系列之五——表单校验

系列目录 《gin框架使用系列之一——快速启动和url分组》《gin框架使用系列之二——uri占位符和占位符变量的获取》《gin框架使用系列之三——获取表单数据》《gin框架使用系列之四——json和protobuf的渲染》 一 、表单验证的基本理论 在第三篇中&#xff0c;我们介绍了如何…
阅读更多...
linux系统 CentOS Tomcat 部署论坛

linux系统 CentOS Tomcat 部署论坛

jdk安装命令&#xff1a;yum -y install java-1.8.0-openjdk-devel.x86_64 结尾上显示下图为成功 检查jdk环境是否配置成功命令&#xff1a;java -version或javac 显示版本 显示信息 mysql安装&#xff1a; 检查是否存mariadb数据库&#xff1a;rpm -qa | grep mariad 卸载ma…
阅读更多...
Elasticsearch中复制一个索引数据到新的索引中

Elasticsearch中复制一个索引数据到新的索引中

问题 我有时候&#xff0c;需要调试一个已经存在的ES索引&#xff0c;需要从已有的索引复制数据到新的索引中去。 解决 这里我借助一个GUI工具&#xff0c;来解决这个问题&#xff0c;底层它是使用Reindex的API实现索引数据复制的。利用Reindex API搞不定这个事情&#xff0…
阅读更多...
【MATLAB】PSO粒子群优化BiLSTM（PSO_BiLSTM）的时间序列预测

【MATLAB】PSO粒子群优化BiLSTM（PSO_BiLSTM）的时间序列预测

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 基于PSO粒子群优化的BiLSTM的时间序列预测算法的基本原理如下&#xff1a; 「双向长短时记忆&#xff08;BiLSTM&#xff09;模型」&#xff1a;这是一种深度学习模型&#xff0c;特别适用…
阅读更多...
C#编程艺术：Fizzler库助您高效爬取www.twitter.com音频

C#编程艺术：Fizzler库助您高效爬取www.twitter.com音频

数据是当今数字时代的核心资源&#xff0c;但是从互联网上抓取数据并不容易。本文将教您如何利用C#编程艺术和Fizzler库高效爬取Twitter上的音频数据&#xff0c;让您轻松获取所需信息。 Twitter简介 Twitter是全球最大的社交媒体平台之一&#xff0c;包含丰富的音频资源。用…
阅读更多...
【TensorFlow 精简版】TensorFlow Lite

【TensorFlow 精简版】TensorFlow Lite

目录 一 TensorFlow Lite简介 二 开发 三 开始使用 一 TensorFlow Lite简介 TensorFlow Lite 是一组工具&#xff0c;可帮助开发者在移动设备、嵌入式设备和 loT 设备上运行模型&#xff0c;以便实现设备端机器学习。 针对设备端的机器学习进行的优化&#xff1a; ① 延时&…
阅读更多...
WPF+Halcon 培训项目实战(1-5):Halcon安装,图像处理,Halcon简单模板匹配

WPF+Halcon 培训项目实战(1-5):Halcon安装,图像处理,Halcon简单模板匹配

文章目录 前言相关链接项目专栏我个人对就业市场的评价Halcon安装实战1-4&#xff1a;Halcon基础实战5&#xff1a;模板匹配[形状匹配]实战代码 结尾 前言 为了更好地去学习WPFHalcon&#xff0c;我决定去报个班学一下。原因无非是想换个工作。相关的教学视频来源于下方的Up主…
阅读更多...
C++构建简单静态库实例（cmakelist）

C++构建简单静态库实例（cmakelist）

一、开发实例 通过cmake构建静态开发实例如下： 1.1 代码目录 代码目录结构如下： 1.2 代码内容 1.2.1 CMakeLists.txt # CMake 最低版本要求 cmake_minimum_required(VERSION 3.10)# 项目名称 project(mylib)# 添加源文件 set(SOURCE_FILESsrc/mylib
阅读更多...
连接progressql报错Cannot load JDBC driver class ‘org.postgresql.Driver‘,亲测有效！！！

连接progressql报错Cannot load JDBC driver class ‘org.postgresql.Driver‘,亲测有效！！！

Jmeter连接progressql报错Cannot load JDBC driver class ‘org.postgresql.Driver’ 1.到官方下载驱动注意&#xff1a;根据项目的JDK版本来下载对应的驱动Download | pgJDBC 2.将postgresql-42.2.27.jar复制到lib目录下面&#xff0c; 然后重新启动 连接driver信息如下&#…
阅读更多...
mapboxgl 中热力图的实现以及给热力图点增加鼠标移上 popup 效果

mapboxgl 中热力图的实现以及给热力图点增加鼠标移上 popup 效果

文章目录 概要效果预览技术思路技术细节小结 概要 本篇文章还是关于最近做到的 mapboxgl 地图展开的。 借鉴官方示例&#xff1a;https://iclient.supermap.io/examples/mapboxgl/editor.html#heatMapLayer 效果预览 技术思路 将接口数据渲染到地图中形成热力图。还需要将热…
阅读更多...
采集京东网数据的10个经典方法

采集京东网数据的10个经典方法

采集京东电商网数据的10个经典方法 京东网数据采集全网抓取网页数据、商品销量、全网搜索、网页爬虫、采集网站数据、网页数据采集软件、python爬虫、HTM网页提取、APP数据抓包、APP数据采集、一站式网站采集技术、BI数据的数据分析、数据标注等成为大数据发展中的热门技术关键…
阅读更多...
反序列化漏洞分析

反序列化漏洞分析

接着昨天的来说&#xff0c;由于fastjson调试起来过程比较复杂&#xff0c;在这里直接看关键点&#xff1a;首先会获取字符串的第一对引号中的内容 如果内容为type就会加载下一对引号中的类 在JavaBeanInfo.class中会获取类中所有详细详细 在这里匹配以set开头的方法 methodNam…
阅读更多...
[C/C++]排序算法 快速排序 (递归与非递归)

[C/C++]排序算法 快速排序 (递归与非递归)

目录 &#x1f6a9;概念: &#x1f6a9;实现: ⚡1.hoare ⚡2.挖坑法 ⚡3.双指针法 &#x1f6a9;快速排序递归实现 &#x1f6a9;快速排序非递归实现 &#x1f6a9;概念: 通过一趟排序将要排序的数据分割成独立的两部分&#xff0c;其中一部分的所有数据比另一部分的所有…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站