更新记录

1.2.2（2019-12-02）

  • 新增 滑动视图示例
  • 修复 批量动态修改数据,返回index错乱的Bug

1.2.1（2019-11-29）

  • 修复 动态删除gird,点击事件获取index不正确的Bug
查看更多

Grid 宫格

uni-grid-item 子组件新增 index 属性，是一个唯一标识，为必传项，如需要更新老版本grid，需要注意 index 属性，如不填写，点击grid将不会返回正确索引

宫格组件，组件名：uni-grid，代码块： uGrid。

使用方式

在 script 中引用组件 

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
export default {
    components: {uniGrid,uniGridItem}
}

在 template 中使用组件

<!-- 一般用法 -->
<uni-grid :column="3">
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
</uni-grid>

<!-- 不带边框并矩形显示 -->
<uni-grid :column="3" :show-border="false"  :square="false">
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
</uni-grid>

属性说明

uni-grid 属性说明：

属性名 类型 默认值 说明
column Number 3 每列显示个数
showBorder Boolean true 是否显示边框
borderColor String #d0dee5 边框颜色
square Boolean true 是否方形显示
highlight Boolean true 点击背景是否高亮

事件说明

事件名 说明 返回值
@change 点击 grid 触发 e={detail:{index:0}}，index 为当前点击 gird 下标

uni-grid-item 属性说明：

属性名 类型 默认值 说明
index Number - 子组件的唯一标识 ，点击gird会返回当前的标识

Tips

  • 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
  • Grid 组件仅在自定义组件模式下支持
  • column 属性最大值最好不要超过 5 个，如果超过，注意内容显示
  • 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
  • 为了避免高度显示错误组件内必须要有内容

插件预览地址

https://uniapp.dcloud.io/h5/pages/extUI/grid/grid

隐私、权限及商业化声明

说明：除收费原生SDK插件外，其他插件或示例工程默认均为MIT开源协议。如提供了github地址，并在github上专门标注了开源协议，则以github标注为准。

1. 本插件需要申请的手机端权限列表：

无

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

无

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

无

评论列表 撰写评论
加载更多...
插件问答

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