创新互联百度小程序教程:grid宫格

  • grid 宫格
    • 属性说明
    • 示例
      • 代码示例

    grid 宫格

    解释:宫格组件,包含上图下文和左图右文两种样式。可配置图片、主标题文案、副标题文案。适用于信息展示,并可放置在页面的任何位置。

    创新互联公司专业成都网站设计、网站建设,集网站策划、网站设计、网站制作于一体,网站seo、网站优化、网站营销、软文发稿等专业人才根据搜索规律编程设计,让网站在运行后,在搜索中有好的表现,专业设计制作为您带来效益的网站!让网站建设为您创造效益。

    属性说明

    属性名 类型 必填 默认值 说明

    list

    Array

    宫格数据,示例 [{imageSrc: ‘图片地址’, title: ‘最多展示六个字主标题’, subTitle: ‘副标题文案’}] 左图右文不支持显示副标题,详细请阅读代码示例

    type

    String

    vertical

    样式类型 vertical 上图下文、horizontal 左图右文

    columnNum

    Number

    2

    宫格展示列数,最少支持两列,上图下文最多支持 4 列,左图右文最多支持 3 列

    imgBorderRadius

    Number

    3

    图片圆角(单位:rpx)

    hasBorder

    Boolean

    true

    行与行之间的下边框

    disable

    Boolean

    false

    是否有点击态

    imageBorder

    Boolean

    false

    图片是否有 1px 描边

    hasSeparateLine

    Boolean

    true

    宫格每一项之间的束分割线

    smt-item-class

    String

    提供宫格扩展样式类,供开发者自定义组件样式,可通过此 class 改变单个宫格外部样式

    smt-title-class

    String

    提供宫格扩展样式类,供开发者自定义组件样式,可通过此 class 改变单个宫格主标题样式

    smt-sub-title-class

    String

    提供宫格扩展样式类,供开发者自定义组件样式,可通过此 class 改变单个宫格副标题样式

    bind:clickhld

    EventHandle

    点击事件,事件详情为点击项展示数据

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
     
     
     
    1. bind:clickhld="clickHld"
    2. list="{{list}}"
    3. >
    4. bind:clickhld="clickHld"
    5. item-class="item"
    6. title-class="title"
    7. sub-title-class="sub-title"
    8. list="{{list}}"
    9. column-num="{{3}}"
    10. >
    11. type="horizontal"
    12. bind:clickhld="clickHld"
    13. item-class="item"
    14. title-class="title"
    15. list="{{horizontalList}}"
    16. column-num="{{3}}"
    17. >

    名称栏目:创新互联百度小程序教程:grid宫格
    分享路径:http://www.shufengxianlan.com/qtweb/news4/487654.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联