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

news2024/11/16 5:57:51

目录

基本使用

#分栏间隔

#混合布局

#分栏偏移

#对齐方式

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.coloradmin.cn/o/1339341.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第2课 用FFmpeg读取rtmp流并显示视频

第2课 用FFmpeg读取rtmp流并显示视频

这节课我们开始利用ffmpeg和opencv来实现一个rtmp播放器。播放器的最基本功能其实就两个:显示画面和播放声音。在实现这两个功能前&#xff0c;我们需要先用ffmpeg连接到rtmp服务器&#xff0c;当然也可以打开一个文件。 1.压缩备份上节课工程文件夹为demo.rar&#xff0c;并修…
阅读更多...
网站显示不安全警告怎么办？消除网站不安全警告超全指南

网站显示不安全警告怎么办？消除网站不安全警告超全指南

网站显示不安全警告怎么办&#xff1f;当用户访问你的网站&#xff0c;而您的网站没有部署SSL证书实现HTTPS加密时&#xff0c;网站就会显示不安全警告&#xff0c;这种警告&#xff0c;不仅有可能阻止用户继续浏览网站&#xff0c;影响网站声誉&#xff0c;还有可能影响网站在…
阅读更多...
视频格式网络地址转换视频到本地，获取封面、时长，其他格式转换成mp4

视频格式网络地址转换视频到本地，获取封面、时长，其他格式转换成mp4

使用ffmpeg软件转换网络视频&#xff0c;先从官网下载对应操作系统环境的包 注意:网络地址需要是视频格式结尾&#xff0c;例如.mp4,.flv 等 官网地址&#xff1a;Download FFmpeg window包&#xff1a; linux包&#xff1a; 如果下载缓慢&#xff0c;下载迅雷安装使用…
阅读更多...
RabbitMQ核心概念记录

RabbitMQ核心概念记录

本文来记录下RabbitMQ核心概念 文章目录 什么叫消息队列为何用消息队列RabbitMQ简介RabbitMQ基本概念RabbitMQ 特点具体特点包括 Rabbitmq的工作过程RabbitMQ集群RabbitMQ 的集群节点包括Rabbit 模式大概分为以下三种单一模式普通模式镜像模式 本文小结 什么叫消息队列 消息&am…
阅读更多...
Spring 是如何解决循环依赖问题的方案

Spring 是如何解决循环依赖问题的方案

文章目录 Spring 是如何解决循环依赖问题的&#xff1f; Spring 是如何解决循环依赖问题的&#xff1f; 我们都知道&#xff0c;如果在代码中&#xff0c;将两个或多个 Bean 互相之间持有对方的引用就会发生循环依赖。循环的依赖将会导致注入死循环。这是 Spring 发生循环依赖…
阅读更多...
基于Docker的软件环境部署脚本，持续更新~

基于Docker的软件环境部署脚本，持续更新~

使用时CtrlF搜索你想要的环境&#xff0c;如果没有你想要的环境&#xff0c;可以评论留言&#xff0c;会尽力补充。 本文提供的部署脚本默认参数仅适合开发测试&#xff0c;请根据实际情况调节参数。 数据库 MySQL version: 3.9 services:mysql:image: mysql:8.0.35container…
阅读更多...
在 iPhone 手机上恢复数据的 7 个有效应用程序

在 iPhone 手机上恢复数据的 7 个有效应用程序

我们的生活离不开 iPhone。无论我们走到哪里&#xff0c;他们都陪伴着我们&#xff0c;让我们保持联系、拍摄照片和视频&#xff0c;并提供娱乐。与此同时&#xff0c;您将计算机安全地放在办公桌上&#xff0c;不受天气影响&#xff0c;也不受伤害。如果您要在任何地方丢失重要…
阅读更多...
Jmeter 性能 —— 监控服务器！

Jmeter 性能 —— 监控服务器！

Jmeter 监控Linux需要三个文件 JMeterPlugins-Extras.jar (包&#xff1a;JMeterPlugins-Extras-1.4.0.zip)JMeterPlugins-Standard.jar (包&#xff1a;JMeterPlugins-Standard-1.4.0.zip)ServerAgent-2.2.3.zip 1、Jemter 安装插件 在插件管理中心的搜索Servers Performa…
阅读更多...
cpp_07_类型转换构造_析构函数_深拷贝_静态成员

cpp_07_类型转换构造_析构函数_深拷贝_静态成员

1 类型转换构造函数 1.1 why? 基本类型之间的转换&#xff0c;编译器内置转换规则&#xff1a;int -> double 类类型之间的转换&#xff0c;编译器不知道转换规则&#xff0c;需要用户提供&#xff1a;Cat -> Dog // consconv_why.cpp 为什么需要自定义转换 #includ…
阅读更多...
多出口-热备---实验

多出口-热备---实验

多出口-热备 拓扑 需求 1&#xff09;增加出口路由器&#xff0c;实现路由器冗余&#xff0c;实现出口设备热备份 配置步骤 1&#xff09;SW5和SW6创建vlan25 vlan26 2) SW5配置vlanif 25的IP地址 3&#xff09;S 4&#xff09;统一规划设计一下MSTP 5&#xff09;R2配…
阅读更多...
Java中利用Redis,ZooKeeper,数据库等实现分布式锁(遥遥领先)

Java中利用Redis,ZooKeeper,数据库等实现分布式锁(遥遥领先)

1. 分布式锁 1.1 什么是分布式锁 在我们进行单机应用开发涉及并发同步的时候&#xff0c;我们往往采用synchronized或者ReentrantLock的方式来解决多线程间的代码同步问题。但是当我们的应用是在分布式集群工作的情况下&#xff0c;那么就需要一种更加高级的锁机制&#xff0…
阅读更多...
奇富科技跻身国际AI学术顶级会议ICASSP 2024，AI智能感知能力迈入新纪元

奇富科技跻身国际AI学术顶级会议ICASSP 2024，AI智能感知能力迈入新纪元

近日&#xff0c;2024年IEEE声学、语音与信号处理国际会议ICASSP 2024&#xff08;2024 IEEE International Conference on Acoustics, Speech, and Signal Processing&#xff09;宣布录用奇富科技关于语音情感计算的最新研究成果论文“MS-SENet: Enhancing Speech Emotion Re…
阅读更多...
java设计模式学习之【状态模式】

java设计模式学习之【状态模式】

文章目录 引言状态模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用状态示例代码地址 引言 设想你正在使用一个在线视频播放器观看电影。随着你的互动&#xff0c;播放器可能处于不同的状态&#xff1a;播放、暂停、缓冲或结束。每个状态下&#xff0c;播放…
阅读更多...
IDEA安装教程及使用

IDEA安装教程及使用

一、IDEA简介 ​ IDEA全称IntelliJ IDEA&#xff0c;是用于Java语言开发的集成环境&#xff0c;它是业界公认的目前用于Java程序开发最好的工具。 集成环境&#xff1a;把代码编写&#xff0c;编译&#xff0c;执行&#xff0c;调试等多种功能综合到一起的开发工具。 二、ID…
阅读更多...
数据分析之词云图绘制

数据分析之词云图绘制

试验任务概述&#xff1a;如下为所给CSDN博客信息表&#xff0c;分别汇总了ai, algo, big-data, blockchain, hardware, math, miniprog等7个标签的博客。对CSDN不同领域标签类别的博客内容进行词频统计&#xff0c;绘制词频统计图&#xff0c;并根据词频统计的结果绘制词云图。…
阅读更多...
使用streampark进行flink on k8s LoadBalancer配置域名访问flink ui

使用streampark进行flink on k8s LoadBalancer配置域名访问flink ui

在使用yarn部署flink任务时&#xff0c;yarn自动代理了flink web ui&#xff0c;通过yarn的地址即可访问任务web页面。 k8s模式下想访问flink web ui&#xff0c;要么使用NodePort的方式启动任务&#xff0c;然后通过k8s主机IPNodePort端口来进行访问。但是这种方法&#xff0…
阅读更多...
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
阅读更多...
分布式数据库 GaiaDB-X 通过 GB18030-2022《信息技术 中文编码字符集》最高级别认证

分布式数据库 GaiaDB-X 通过 GB18030-2022《信息技术 中文编码字符集》最高级别认证

近日&#xff0c;百度智能云分布式数据库GaiaDB-X通过 GB18030-2022《信息技术 中文编码字符集》强制性国家标准测试&#xff0c;达到最高实现级别&#xff08;3级&#xff09;。 据了解&#xff0c;GB18030-2022《信息技术 中文编码字符集》是中文信息技术领域最重要的基础性标…
阅读更多...
在 Unity 中获取 Object 对象的编辑器对象

在 Unity 中获取 Object 对象的编辑器对象

有这个需求的原因是&#xff0c;在编辑器的 Inspector 逻辑中&#xff0c;写了许多生成逻辑。 现在不想挨个在 Inspector 上都点一遍按钮&#xff0c;所以就需要能获取到它们的编辑器对象。 发现可以借助官方的 UnityEditor.Editor.CreateEditor 方法达到目的&#xff0c;如下…
阅读更多...
【IoT网络层】STM32 + ESP8266 +MQTT + 阿里云物联网平台 |开源，附资料|

【IoT网络层】STM32 + ESP8266 +MQTT + 阿里云物联网平台 |开源，附资料|

目标&#xff1a;实现STM32连接阿里云物联网平台发送数据同时接收数据&#xff0c;IOT studio界面显示数据。具体来说&#xff1a;使用ESP8266 ESP-01来连接网络&#xff0c;获取设备数据发送到阿里云物联网平台并显示且oled显示屏当前的设备数据&#xff0c;通过IOT studio界面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023