原生App首页样式
时间:2022-03-20 09:24:22查看量:4115
组件样式
顶部banner广告
宫格
其它样式
JSON格式
字段 | 类型 | 说明 | 备注 | 是否必须 |
---|---|---|---|---|
all_data | array | 是 |
all_data 格式如下: 详细字段解释见下表(字段详情表):
{
"all_data": [
{
"type": "banner",
"height": "150",
"list": []
},
{
"type": "gongge",
"num": "5",
"list": []
}
...
....
.....
]}
字段详情表
字段 | 类型 | 说明 | 备注 | 是否必须 |
---|---|---|---|---|
type | string | 布局类型 | 取值范围: banner gongge img4 img3left img3right titleimg3 titleimg2 titleimg1 piclistimgleft_subright piclistimgright_subright piclistimgleft_subleft piclistimgright_subleft goodslistimgleft_subright goodslistimgleft_subleft goodslistimgup_subrigh goodslistimgup_subleft | 是 |
height | int | 轮播图的高度 | 只在type为banner的时候使用 | 是 |
list | Array | 每一个type对应不同的数据结构,下面会有说明 | 是 | |
num | int | 每行显示的个数 | 只在type为gongge时使用 | 是 |
imgleft | string | 标题左侧小图标 | 当type为titleimg1、titleimg2、titleimg3的时候使用 | 否 |
title | string | 主标题 | 当type为titleimg1、titleimg2、titleimg3的时候使用 | 是 |
subtitle | string | 副标题 | 当type为titleimg1、titleimg2、titleimg3的时候使用 | 是 |
titlesize | int | 主标题文字大小 | 否 | |
titlecolor | 十六进制 | 主标题文字颜色 | 例:0x009966 | 否 |
subtitlesize | int | 副标题文字大小 | 否 | |
subtitlecolor | 十六进制 | 副标题文字颜色 | 例:0x009966 | 否 |
imgright | string | 标题右侧小图标 | 否 |
顶部banner广告JSON格式
字段 | 类型 | 说明 | 备注 | 是否必须 |
---|---|---|---|---|
link | string | 点击跳转的链接 | 是 | |
imgurl | string | 图片链接地址 | 是 |
{
"type": "banner",
"height": "150",
"list": [ {
"imgurl": "http://xxxx.png",
"link": ""
}]
}
宫格JSON格式
字段 | 类型 | 说明 | 备注 | 是否必须 |
---|---|---|---|---|
link | string | 点击跳转的链接 | 是 | |
imgurl | string | 图片链接地址 | 是 | |
title | string | 图片下方文字 | 是 | |
titlecolor | 十六进制 | 文字颜色 | 否 | |
titlesize | int | 文字大小 | 否 | |
width | int | 图片宽度 | 否 | |
height | int | 图片高度 | 否 |
{
"type": "gongge",
"num": "5",
"list": [ {
"imgurl": "http://53469401.png",
"title": "数码",
"link": "",
"width": "50",
"height": "50",
"titlecolor": "0x009966",
"titlesize": "14"
}]
}
img4、img3left、img3right样式JSON格式
字段 | 类型 | 说明 | 备注 | 是否必须 |
---|---|---|---|---|
link | string | 点击跳转的链接 | 是 | |
imgurl | string | 图片链接地址 | 是 | |
title | string | 图片上显示的文字 | 否 | |
titlecolor | 十六进制 | 文字颜色 | 否 | |
titlesize | int | 文字大小 | 否 |
{
"type": "img4",
"list": [{
"imgurl": "http://469401.png",
"link": "",
"title": "\u6807\u98983",
"titlesize": "14",
"titlecolor": "0x009966"
}]
}
itleimg1、titleimg2、titleimg3样式JSON格式
字段 | 类型 | 说明 | 备注 | 是否必须 |
---|---|---|---|---|
link | string | 点击跳转的链接 | 是 | |
imgurl | string | 图片链接地址 | 是 |
{
"type": "titleimg1",
"imgleft": "http://tm.png",
"title": "图片组件展示风格1",
"subtitle": "一个可能有点儿字的子标题",
"titlesize": "20",
"titlecolor": "0x009966",
"subtitlesize": "14",
"subtitlecolor": "0x009966",
"imgright": "http://ancher.jpg",
"list": [{
"imgurl": "http://53469401.png",
"link": ""
}]
}
其它样式JSON格式
piclistimgleft_subright、piclistimgright_subright、piclistimgleft_subleft、
piclistimgright_subleft goodslistimgleft_subright、goodslistimgleft_subleft、
goodslistimgup_subright、goodslistimgup_subleft
字段 | 类型 | 说明 | 备注 | 是否必须 |
---|---|---|---|---|
link | string | 点击跳转的链接 | 是 | |
imgurl | string | 图片链接地址 | 是 | |
titles | array | item内容信息 (详情见下表: titles数据结构) | 内容按照数组数据顺序从上向下显示 | 是 |
- titles数据结构:
字段 | 类型 | 说明 | 备注 | 是否必须 |
---|---|---|---|---|
imgleft | string | 文字左侧小图标 | 否 | |
imgleftwidth | int | 文字左侧小图标宽度 | 否 | |
imgleftheight | int | 文字左侧小图标高度 | 否 | |
imgright | string | 文字右侧小图标 | 否 | |
imgrightwidth | int | 文字右侧小图标宽度 | 否 | |
imgrightheight | int | 文字右侧小图标高度 | 否 | |
text | string | 图片下方文字 | 是 | |
textcolor | 十六进制 | 文字颜色 | 否 | |
textsize | int | 文字大小 | 否 |
{
"type": "goodslistimgup_subleft",
"list": [{
"imgurl": "http://310x310.jpg_.webp",
"link": "",
"titles": [{
"imgleft": "http://tm.png",
"imgleftwidth": "30",
"imgleftheight": "17",
"text": "运动套装春秋季纯色长袖卫衣",
"textcolor": "0x222222",
"textsize": "18",
"imgright": ""
}, {
"imgleft": "http://a-209-42.png",
"imgleftwidth": 50,
"imgleftheight": "10",
"text": "39.5",
"textcolor": "0x00FF00",
"textsize": "20",
"imgright": ""
}, {
"imgleft": "",
"text": "已售400",
"textcolor": "0x222222",
"textsize": "14",
"imgright": ""
}, {
"imgleft": "http://!85.webp",
"imgleftwidth": 50,
"imgleftheight": "10",
"text": "旗舰店",
"textcolor": "0x222222",
"textsize": "14",
"imgright": "http://ncher.jpg",
"imgrightwidth": "10",
"imgrightheight": "10"
}]
}
上一篇:变色龙原生App功能介绍
下一篇:原生分类页面样式