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

创新互联公司专业成都网站设计、网站建设,集网站策划、网站设计、网站制作于一体,网站seo、网站优化、网站营销、软文发稿等专业人才根据搜索规律编程设计,让网站在运行后,在搜索中有好的表现,专业设计制作为您带来效益的网站!让网站建设为您创造效益。
| 属性名 | 类型 | 必填 | 默认值 | 说明 | 
|---|---|---|---|---|
| 
 list  | 
 Array  | 
 是  | 
 宫格数据,示例   | 
|
| 
 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扫码
bind:clickhld="clickHld"list="{{list}}">bind:clickhld="clickHld"item-class="item"title-class="title"sub-title-class="sub-title"list="{{list}}"column-num="{{3}}">type="horizontal"bind:clickhld="clickHld"item-class="item"title-class="title"list="{{horizontalList}}"column-num="{{3}}">
                网站栏目:创新互联百度小程序教程:grid宫格
                
                网页链接:http://www.csdahua.cn/qtweb/news4/487654.html
            
网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网