• 更新记录
  • 1.1.1（2019-07-19）
  • 1.1.0（2019-07-15）
    • Grid 宫格
    • 更新日志

    更新记录

    1.1.1（2019-07-19）

    • 修复 依赖组件找不到的问题

    1.1.0（2019-07-15）

    • 新增 红点、数字角标、图片角标
    • 新增 可显示隐藏边框，修改边框颜色
    • 优化 内容改为插槽，提高定制性
    • 优化 （重要）组件代码重构，与之前代码不兼容，如需使用新功能，请替换当前最新组件查看更多

    Grid 宫格

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

    使用方式：

    在 script 中引用组件 

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

    Grid 一般用法

    1. <uni-grid :column="3">
    2.     <uni-grid-item>
    3.         <text class="text">文本</text>
    4.     </uni-grid-item>
    5.     <uni-grid-item>
    6.         <text class="text">文本</text>
    7.     </uni-grid-item>
    8.     <uni-grid-item>
    9.         <text class="text">文本</text>
    10.     </uni-grid-item>
    11. </uni-grid>

    Grid 添加角标红点

    1. <uni-grid :column="3" :hor="35" :ver="-45">
    2.     <uni-grid-item marker="dot">
    3.         <text class="text">文本</text>
    4.     </uni-grid-item>
    5.     <uni-grid-item marker="badge" text="99" type="success">
    6.         <text class="text">文本</text>
    7.     </uni-grid-item>
    8.     <uni-grid-item marker="image" :hor="35" :ver="-45" :img-width="25" src="https://img-cdn-qiniu.dcloud.net.cn/uni-ui/recommend.png">
    9.         <text class="text">文本</text>
    10.     </uni-grid-item>
    11. </uni-grid>

    Gird 不带边框并矩形显示

    1. <uni-grid :column="3" :show-border="false"  :square="false">
    2.     <uni-grid-item>
    3.         <text class="text">文本</text>
    4.     </uni-grid-item>
    5.     <uni-grid-item>
    6.         <text class="text">文本</text>
    7.     </uni-grid-item>
    8.     <uni-grid-item>
    9.         <text class="text">文本</text>
    10.     </uni-grid-item>
    11.     <uni-grid-item>
    12.         <text class="text">文本</text>
    13.     </uni-grid-item>
    14.     <uni-grid-item>
    15.         <text class="text">文本</text>
    16.     </uni-grid-item>
    17.     <uni-grid-item>
    18.         <text class="text">文本</text>
    19.     </uni-grid-item>
    20. </uni-grid>

    uni-grid 属性说明：

    属性名类型默认值说明
    columnNumber3每列显示个数
    showBorderBooleantrue是否显示边框
    borderColorString#d0dee5边框颜色
    horNumber0全局 marker 水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动
    verNumber0全局 marker 垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动
    squareBooleantrue是否方形显示
    highlightBooleantrue点击背景是否高亮
    @changefunction-点击 grid 触发，返回 event={detail:{index:0}},index 为当前点击 gird 下标

    uni-grid-item 属性实名：

    属性名类型默认值说明
    markerString-marker 类型，可选值，dot：圆点；badge：角标；image：图片； 默认不显示
    horNumber0局部 marker 水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动，可覆盖全局 hor
    verNumber0局部 marker 垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动，可覆盖全局 ver
    typeString-marker:badge 下生效 ，marker 显示内容，如果为汉字最多长度最大为1
    sizeStringnormalmarker:badge 下生效 ，marker 大小，可取值：normal、small
    invertedBooleanfalsemarker:badge 下生效 ，marker 是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色
    srcString-marker:image 下生效 ，marker 图片地址路径
    imgWidthNumber30marker:image 下生效 ，marker 宽度，高度自适应

    Tips

    • marker:dot ， 暂不支持修改大小，和颜色
    • Grid 组件仅在自定义组件模式下支持
    • column 属性最大值最好不要超过 5 个，如果超过，注意内容显示
    • 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 —> 项目配置 —> 启用 component2 编译

    更新日志

    1.1.1

    • 修复 依赖组件找不不到的问题 1.1.0

    • 新增 红点、数字角标、图片角标

    • 新增 可显示隐藏边框，修改边框颜色
    • 优化 内容改为插槽，提高定制性

    • 优化 （重要）组件代码重构，与之前代码不兼容，如需使用新功能，请替换当前最新组件 1.0.0

    • 初始项目