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

已于 2023-12-27 08:15:02 修改
阅读量1.5k 收藏 7
点赞数 17
分类专栏： uniapp 文章标签： uni-app javascript 开发语言
于 2023-12-27 08:08:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72603435/article/details/135235809
版权

目录

基本使用

#分栏间隔

#混合布局

#分栏偏移

#对齐方式

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组件，轻松实现各种复杂的布局效果。

TechWhiz-晓同
关注
专栏目录
uniapp - uview 组件库下 Checkbox 复选框设置 placement 属性 row / column 无效（排列方式无法横向只能纵向排列）完美解决方案
王佳斌
06-07 3313
uniapp uview 框架下 checkbox 复选框无法设置横向排列怎么办，uview2.0 复选框设置placement无效，uniapp uview2.X 复选框组件设置 placement属性无效，uniapp uview2.X框架中的 checkbox 复选框设置不了横向排列，uview 复选框无法横向排列， uniapp - uview 组件库下 Checkbox 复选框设置 placement 属性 row / column 无效（排列方式无法横向只能纵向排列）完美解决方案。
uniapp - 解决编译成钉钉小程序后，发现uView组件库的组件样式失效（就连自定义组件样式失效），完美 100% 解决uniapp编译打包钉钉小程序端后uview组件失效问题
高级前端工程师
11-18 3936
uniapp，钉钉小程序，uniapp编译钉钉小程序后样式都没了，uniapp打包编译为钉钉小程序uview组件库失效了，钉钉小程序不支持styleIsolation，uniapp钉钉小程序组件的样式都出问题了，钉钉小程序编译后样式都乱套了，uniapp搭建的钉钉小程序样式全丢问题，uni钉钉小程序编译后自定义组件和UI框架都没有样式，uniapp钉钉小程序uview框架组件库失效了怎么办，uniapp编译成钉钉小程序，uViewUI组件样式失效，uniapp中钉钉小程序平台编译后css样式异常失效，钉钉小
uview笔记
文杰的博客
07-26 285
外部包裹设置overflow: hidden u-row使用customStyle属性设置margin为-的需要的尺寸，u-col的内层view 设置需要尺寸的padding。当页面变化时调用mixins 中的getParentData方法同步参数的变化情况。css 都是内部特有css 且声明所有需要的变量，css名称已。(组件内部层级用__分割, 其他用–分割)父组件中computed获取外部页面传入变化。props中写传入参数，默认值写在配置中。props文件和组件文件。2.uview封装组件。
uview与微信小程序的坑-弹性布局-display:flex
W776131404的博客
12-16 2240
uview中的弹性布局带来的坑
uniapp页面分栏模式，如何设置，与开发
最新发布
maliao5的博客
08-19 227
目录配置分栏设置第一种，响应式，用媒体查询，在不同屏幕下的font-size的大小改变，不是很精准的等比例放大第二种，单位使用vw,vh，能够达到屏幕的自适应。（比较推荐使用）
使用uView的u-row和u-col布局，页面数据明明不多，却很卡顿。
LIJIANGNIHAO123的博客
05-03 1651
如果页面运用u-row和u-col不多，那没什么关系，继续用也无妨；如果页面某个列表遍历数据，通过u-row和u-col大量生成DOM，那最好还是不要用这种布局。先说结论：u-row 和 u-col 组件运用了大量的计算属性计算影响性能，及时页面只有二三十条数据，在一些交互上也会很卡顿（比如点击弹出弹窗之类的，滚动列表倒是不受影响，很奇怪）明明页面只有二十来条数据，交互起来却已经很卡顿，如果页面使用了u-row和u-col布局，那很可能就是它们在搞鬼。
小程序瀑布流_溶洞中的地下瀑布，源头无人知晓，从340米高的地方倾泻而下
weixin_39927408的博客
11-30 122
溶洞中的地下瀑布，源头无人知晓，从340米高的地方倾泻而下从瀑布上的定义来看，一般是指从山壁上或者河床上突然降落的地方流下的水，远看就像一片挂着的白布，瀑布就是流动的河水突然垂直跌落，从而形成的地质构造，有的气势磅礴，有的我行我素。从中国的十大瀑布来看，黄果树瀑布位于第一位，堪称中国第一大瀑布，贵州第一胜景，通过全球卫星定位系统，最终测得实际高度为77.8米，因为其形态各异，形成了庞大的瀑布家族，...
uni-app：多方法实现两个view在同一行展示（布局）
weixin_46001736的博客
09-26 7428
uni-app：实现两个view在同一行展示（布局）
uview 瀑布流_微信小程序通过js实现瀑布流布局详解
weixin_30290193的博客
12-24 981
前言瀑布流 - 小程序中数据列表或者图片展示难免高度不一，而我们一般固定宽度，让其高度自适应，并无缝对接。如下图：瀑布流的两种做法：css:在父元素上使用column-count: 2也可以做到两列排版。但column-count: 2是左右两列排版，如果碰巧出现左边累计高度过多大于右边累计高度的话，右边会出现大片空白区域。点击前往js(推荐):判断左右两边的累计高度，那边的高...
uniapp封装的接口和已经引入uview的模板项目
07-18
【标题】：在“uniapp封装的接口和已经引入uview的模板项目”中，我们主要探讨的是如何在uni-app框架下进行接口封装，并利用uView UI库来构建高效的移动应用模板。 【描述】：uni-app是一个跨端开发框架，它允许...
rtvue-lowcode：一款基于uniapp框架和uview组件库的开源低代码开发平台
贼大的桔子
08-31 1461
rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台，项目提供可视化拖拽编辑器，采用MIT开源协议，适用于app、小程序等项目开发。 对于客户端/浏览器端开发人员，真正意义的上做到了开箱即用！ 目前项目正在研发中，已经实现的功能如下：表单组件，自定义表单，抽奖转盘，图表。 相信开发完毕之后，本项目将会是一个非常nice的工具，能够极大减小企业app端开发成本。 项目预览地址 Project Preview Address 开源不易，朋
自定义ViewGroup完成瀑布流式布局
04-30
详细注释并且分步骤由浅入深的讲解了自定义ViewGroup，同时完成了流式布局。
customStyle
03-21
工作量 用方法/函数编写类以向网站添加定义CSS样式 要求： 使用打字稿 使此功能防弹 函数定义如下： 函数：addCustomStyle，创建自定义样式元素并追加到html主体 示例函数调用：addCustomStyle（“ myStyle”，“ .someClassName”，“ {background-color：#cccccc}”） 这导致使用给定的样式定义<style id =“ myStyle”> .someClassName {background-color：#cccccc} </ style>向网站添加样式html元素 @param styleidentifier：字符串，定义样式元素的ID，以标识样式以供以后使用 @param选择器：字符串，有效CSS选择器 @param属性：任意，带有花括号的css属性的对象，例如：{display：none} @param med
CustomStyle
10-11
CustomStyle
使用uniapp + uView 打造微信小程序&H5端 在线教育网校系统.zip
12-13
uView则是一个UI组件库，为uniapp提供了丰富的界面元素和交互设计，使得开发者可以快速搭建美观且功能齐全的用户界面。项目主要目标是创建一个在线教育平台，支持微信小程序和H5（移动端网页）端的使用，这意味着它...
uni-app 上下两个view暂满页面,flex布局
HXH_csdn的博客
01-06 2470
页面是需要一个nav导航和一个列表,因为列表里面有很多数据,所以要加一个scroll-view 下面代码 <view style="height: 100vh;display:flex;flex-direction: column; align-items: flex-start;"> <view> <view stype="display:flex;flex-direction: row; align-items: center;"> <view&gt
流式布局展示
Aasons的博客
03-07 176
package com.example.aason.yuekaolianxi.fragment; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment...
自定义ViewGroup系列---流式布局FlowViewGroup
u010869159的博客
08-31 201
本篇继续ViewGroup系列来讲述自定义ViewGroup的流程。本篇要讲述的是流式布局。 在Java Swing中，有一种布局，叫流式布局，这种布局的特点是子组件按照从左到右，从上到下的顺序依次排序，如果一行放不下了，自动显示到下一行。Android中并没有提供这样的布局，本节，我们将一起来实现这种流式布局FlowViewGroup。 对于FlowViewGroup来说，有两个难点： 1. 计算子组件的排布后的宽度和高度 FlowViewGroup的宽度为wrap_content时计算逻辑如下 meas
iview-layout布局
weixin_30795127的博客
06-28 1464
Layout：布局容器，其下可嵌套HeaderSiderContentFooter或Layout本身，可以放在任何父容器中。 Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。 Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。 Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Lay...
uniapp使用uview组件不生效
05-28
如果在使用 uniapp 的时候，引入了 uView 组件，但是发现组件并没有生效，可以尝试以下几个步骤： 1. 确认 uView 是否已经正确引入到项目中，可以在 `pages.json` 中的 `easycom` 配置中添加 `"@dcloudio/vue-cli-plugin-uni/packages/uview-ui"`，或者在 `main.js` 中全局引入：`import uView from 'uview-ui'`，并在 `Vue.use(uView)` 中注册。 2. 确认是否正确使用了 uView 组件，例如使用了 `u-button` 组件，应该这样引入：`<u-button>按钮</u-button>`。 3. 确认是否正确配置了 uniapp 的 easycom 配置，在 `pages.json` 中添加了 `"easycom": {"autoscan": true,"custom": {"@/components/":{}}}`。 4. 确认是否正确配置了 webpack，可以在 `vue.config.js` 中添加以下代码： ``` configureWebpack: { resolve: { alias: { 'uview-ui': 'uview-ui/src' } } } ``` 以上是常见问题的解决方法，如果以上方法都不行，可以尝试在官方文档中查找其他解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TechWhiz-晓同

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值