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属性修改掉
    }
})
效果如下:

效果