### 自定義html頁面 > 支持異步獲取數據, 支持分頁 調用示例: ~~~ return SBuilder::makeCardList() ->setPageTitle('數據面板') ->setPageTips('請選擇您想要的商品', 'success') ->setData([ ['name' => '會員注冊', 'count' => '5468', 'price' => '500', 'crossed_price' => '1200', 'show_price' => true, 'price_prefix' => 'S$', 'price_unit' => '/人', 'tags' => [ ['title' => '海量注冊用戶', 'type' => 'success'], ['title' => '價格賊貴', 'type' => 'danger'], ]], ['name' => '會員注冊', 'count' => '5468', 'price' => '500', 'crossed_price' => '1200', 'show_price' => true, 'price_prefix' => 'S$', 'price_unit' => '/人', 'tags' => [ ['title' => '海量注冊用戶', 'type' => 'success'], ['title' => '價格賊貴', 'type' => 'danger'], ]], ['name' => '會員注冊', 'count' => '5468', 'price' => '500', 'crossed_price' => '1200', 'show_price' => true, 'price_prefix' => 'S$', 'price_unit' => '/人', 'tags' => [ ['title' => '海量注冊用戶', 'type' => 'success'], ['title' => '價格賊貴', 'type' => 'danger'], ]], ['name' => '會員注冊', 'count' => '5468', 'price' => '500', 'crossed_price' => '1200', 'show_price' => true, 'price_prefix' => 'S$', 'price_unit' => '/人', 'tags' => [ ['title' => '海量注冊用戶', 'type' => 'success'], ['title' => '價格賊貴', 'type' => 'danger'], ]], ]) ->fetch(); ~~~ > 效果圖: >  ## 布局參數 ``` SBuilder::makeHtml([ 'span' => 24, // block區塊寬度, 總寬度24 ]) ``` ## 方法說明 - `setData($data = null) `方法, 設置頁面html內容 ``` /** * 設置當前頁面內的數據(不分頁) * @param $data array 數據格式為:[{cover:string|array, name, count, count_icon, price, crossed_price, show_price, price_prefix, price_unit, show_btn, btn: {type, text} , tags: [{title, type}], html: 若有此字段則渲染為html,其他字段全部無效}] * @return $this */ public function setData($data = null): DataPanel ``` - `setProps` 定義數據的屬性名 ``` /** * @param $props array 屬性名定義 {cover: cover, name: name, tags: tags, count: count, count_icon: count_icon, price: price, price_prefix: price_prefix, price_unit: price_unit, show_price: show_price, crossed_price: crossed_price} * @return $this */ public function setProps($props = null): CardList ``` - `setAjaxDataUrl` 設置異步獲取數據的url ``` /** * 設置ajax獲取數據 * @param $url string|false ajax獲取數據的url, 非ajax動態獲取數據時為false * @return $this */ public function setAjaxDataUrl($url = false): CardList ``` - `setDetailLink` 設置詳情頁面地址 ``` /** * 設置詳情跳轉鏈接 * @param $url string 示例: pop:url('detail') blank:url('detail') * @return $this */ ``` > tips: 1. 詳情鏈接設置支持彈框模式 pop: 以及新頁面打開方式: blank, 默認為 當前頁面跳轉. > tips: 2. url支持雙下劃線方式嵌入當前卡片數據參數, 如: `url('detail', ['id' => '__id__'])` ## 通用方法: 1. 頁面級方法 - [設置頁面標題](http://www.hmoore.net/evanlee/sphp/1068618) - [添加頁面提示信息](http://www.hmoore.net/evanlee/sphp/1068619) - [設置頁面Tab](http://www.hmoore.net/evanlee/sphp/3183863) - [設置頁面背景色](設置頁面背景色.md) - [設置是否點擊遮罩關閉](設置是否點擊遮罩關閉.md) - [添加區塊](添加區塊.md) 2. 區塊級方法 - [設置區塊名](設置區塊名.md) - [設置區塊布局](設置區塊布局.md)