更新记录

0.0.3(2021-02-05)

  • 调整为uni_modules目录规范

0.0.2(2021-02-03)

  • 修复导入实例编译报错$breakpoints找不到
查看更多

平台兼容性

app 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
app-vue app-nvue ×
h5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox pc-Safari

Layout 布局

代码块: uRowuCol

流式栅格系统,随着屏幕或视口分为 24 份,可以迅速简便地创建布局。

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

如需通过npm方式使用uni-ui组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55

为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。

  • 组件需要依赖 sass 插件 ,请自行手动安装
  • 如使用过程中有任何问题,或者您对 uni-ui 有一些好的建议,欢迎加入 uni-ui 交流群:871950839

基本用法

使用单一分栏创建基础的栅格布局
<uni-row class="demo-uni-row">
    <uni-col>
        <view class="demo-uni-col dark_deep"></view>
    </uni-col>
</uni-row>

<uni-row class="demo-uni-row">
    <uni-col :span="12">
        <view class="demo-uni-col dark"></view>
    </uni-col>
    <uni-col :span="12">
        <view class="demo-uni-col light"></view>
    </uni-col>
</uni-row>

分栏偏移

支持偏移指定的栏数
<uni-row class="demo-uni-row">
    <uni-col :span="8">
        <view class="demo-uni-col dark"></view>
    </uni-col>
    <uni-col :span="8" :offset="6">
        <view class="demo-uni-col dark"></view>
    </uni-col>
</uni-row>

<uni-row class="demo-uni-row">
    <uni-col :span="12" :pull="6">
        <view class="demo-uni-col dark"></view>
    </uni-col>
</uni-row>

<uni-row class="demo-uni-row">
    <uni-col :span="12" :push="6">
        <view class="demo-uni-col dark"></view>
    </uni-col>
</uni-row>

响应式布局

共五个响应尺寸:xs、sm、md、lg 和 xl
<uni-row class="demo-uni-row">
    <uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <view class="demo-uni-col dark"></view>
    </uni-col>
    <uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <view class="demo-uni-col light"></view>
    </uni-col>
    <uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <view class="demo-uni-col dark"></view>
    </uni-col>
    <uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <view class="demo-uni-col light"></view>
    </uni-col>
</uni-row>
使用到的 CSS
.demo-uni-row {
    margin-bottom: 10px;
    /* QQ、字节小程序文档写有 :host,但实测不生效 */
    /* 百度小程序没有 :host,需要设置block */
    /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
    display: block;
    /* #endif */
}

/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点,没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
    margin-bottom: 10px;
}
/* #endif */

.demo-uni-col {
    height: 36px;
    border-radius: 4px;
}

.dark_deep {
    background-color: #99a9bf;
}

.dark {
    background-color: #d3dce6;
}

.light {
    background-color: #e5e9f2;
}

平台差异说明

uni-row

属性名 App(nvue) App(vue) H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ 小程序
gutter -

uni-col

属性名 App(nvue) App(vue) H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ 小程序
span
offset
push
pull
xs -
sm -
md -
lg -
xl -

API

Row Props

其他平台

属性名 类型 可选值 默认值 必填 说明
gutter Number - 0 栅格间隔

nvue平台

属性名 类型 可选值 默认值 必填 说明
width Number/String - 750rpx nvue 中无百分比 width,使用 span 等属性时,需配置此项rpx值。此项不会影响其他平台展示效果

Col Props

属性名 类型 可选值 默认值 必填 说明
span Number - 24 栅格占据的列数
offset Number - - 栅格左侧间隔格数
push Number - - 栅格向右偏移格数
pull Number - - 栅格向左偏移格数
xs Number/object - - 屏幕宽度<768px时,要显示的栅格规则,如::xs="8":xs="{span: 8, pull: 4}"
sm Number/object - - 屏幕宽度≥768px时,要显示的栅格规则
md Number/object - - 屏幕宽度≥992px时,要显示的栅格规则
lg Number/object - - 屏幕宽度≥1200px时,要显示的栅格规则
xl Number/object - - 屏幕宽度≥1920px时,要显示的栅格规则

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问