原生頁面-首頁樣式

字段	類型	說明	備注	是否必須
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	標題右側小圖標		否

type布局類型配圖

type各類型取值詳細實例

** type為banner時，list數據結構示例:(具體字段詳情見下表)**

{
		"type": "banner",
		"height": "150",
		"list": [ {
			"imgurl": "http://xxxx.png",
			"link": ""
		}]

字段	類型	說明	備注	是否必須
link	string	點擊跳轉的鏈接		是
imgurl	string	圖片鏈接地址		是

** type為gongge時，list數據結構示例：(具體字段詳情見下表)**

{
		"type": "gongge",
		"num": "5",
		"list": [ {
			"imgurl": "http://53469401.png",
			"title": "數碼",
			"link": "",
			"width": "50",
			"height": "50",
			"titlecolor": "0x009966",
			"titlesize": "14"
		}]
	}

字段	類型	說明	是否必須
link	string	點擊跳轉的鏈接	是
imgurl	string	圖片鏈接地址	是
title	string	圖片下方文字	是
titlecolor	十六進制	文字顏色	否
titlesize	int	文字大小	否
width	int	圖片寬度	否
height	int	圖片高度	否

3 type為img4、img3left、img3right時，list數據結構示例:(具體字段詳情見下表)

{
		"type": "img4",
		"list": [{
			"imgurl": "http://469401.png",
			"link": "",
			"title": "\u6807\u98983",
			"titlesize": "14",
			"titlecolor": "0x009966"
		}]
	}

字段	類型	說明	是否必須
link	string	點擊跳轉的鏈接	是
imgurl	string	圖片鏈接地址	是
title	string	圖片上顯示的文字	否
titlecolor	十六進制	文字顏色	否
titlesize	int	文字大小	否

4 type為titleimg1、titleimg2、titleimg3時，list數據結構示例：(具體字段詳情見下表)

{
		"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": ""
		}]
	}

字段	類型	說明	備注	是否必須
link	string	點擊跳轉的鏈接		是
imgurl	string	圖片鏈接地址		是

5) type 取值 piclistimgleft_subright、piclistimgright_subright、piclistimgleft_subleft、piclistimgright_subleft goodslistimgleft_subright、goodslistimgleft_subleft、goodslistimgup_subright、goodslistimgup_subleft時，list數據結構示列
下面以goodslistimgup_subleft為示例:（其中詳細字段解釋見下面表格）

{
		"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"
			}]
		}

字段	類型	說明	備注	是否必須
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	文字大小	否

2021-11-17 11:58:43

<< 變色龍原生框架原生頁面-列表樣式 >>

熱門App插件

字段詳情表

type各類型取值詳細實例

專屬客服

關注動態