CustomPanel

简介

custompanel是自定义面板控件，custompanel是独立于page外的控件，它可以被设定成一个有规律的布局与属性，因此可以认为简单认为它是一种新的控件，然后就可以通过JS代码，把它加入已有的page或其他容器控件中，重复利用。

使用方法

  • 创建custompanel

点击菜单栏的 文件 -> 新建 -> 自定义面板，然后会弹出一个小窗口其中的名称设置为"item.ui"点击确定即可。

创建custompanel

  • 自定义布局

打开cunstompanel的布局页面，对custompanel进行布局规划

示例如下：

布局

属性设定如下：

属性

  • 载入custompanel

通过在其他page的JS脚本中，通过代码带入custompanel，具体API请查看SetDataAPI文档

以下是在listctrl中，加入多个custompanel的示例代码：

this.setData
({
    listctrl1 : //listctrl1 为列表控件的名称
    {
        page : this,     
        xml : 'Panels/item',     //`item` 为自定义面板的名称
        items :[{imagebox1 : "1.png", label1 : "1.png"},
                {imagebox1 : "2.png", label1 : "2.png"},
                {imagebox1 : "3.png", label1 : "3.png"},
                {imagebox1 : "4.png", label1 : "4.png"},
                {imagebox1 : "5.png", label1 : "5.png"},
                {imagebox1 : "6.png", label1 : "6.png"},
                {imagebox1 : "7.png", label1 : "7.png"},
                {imagebox1 : "8.png", label1 : "8.png"},
                {imagebox1 : "9.png", label1 : "9.png"}]
        //imagebox1` 和 `label1` 分别为加入到自定义面板中的对应控件的名称。
        //但这样做有个后遗症，控件内存在多个重名控件，因此在设定Items的时候，可以把imagebox1与label1的id属性修改掉
    }
})
效果如下：

效果