原生App首页样式

时间：2022-03-20 09:24:22查看量：4116

组件样式

顶部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功能介绍

下一篇：原生分类页面样式

文章列表

分类