### 自定义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. 页面级方法 - [设置页面标题](https://www.kancloud.cn/evanlee/sphp/1068618) - [添加页面提示信息](https://www.kancloud.cn/evanlee/sphp/1068619) - [设置页面Tab](https://www.kancloud.cn/evanlee/sphp/3183863) - [设置页面背景色](设置页面背景色.md) - [设置是否点击遮罩关闭](设置是否点击遮罩关闭.md) - [添加区块](添加区块.md) 2. 区块级方法 - [设置区块名](设置区块名.md) - [设置区块布局](设置区块布局.md)