自定义列表内容

在轻语言网页开发中，用户可以完全通过中文语法自定义任何列表类型的内容，列表内容的展示在网页开发中非常重要，如果把自定义列表内容学会了，制作出漂亮的网页内容将会变得非常容易。

接下来我们将分别讲解列表框和宫格框自定义实现方法。

自定义列表内容

列表内容表示内容按照一条一条的排列，下方为一个自定义纯文本显示的列表演示代码。

代码示例：

事件 页面加载完毕()
    渲染纯文本列表框()
结束 事件

函数 渲染纯文本列表框()
    变量循环(i = 0,10,1)
        列表框1.添加项目("纯文本项目" + i)
    结束循环
    ' 监听浏览器渲染页面时，请求加载项目内容
    ' 这里的项目内容即为列表中的每个项目内容（包含对内容的排版布局）
    ' 在这个事件中，我们可以自定义创建需要展示内容的组件，然后将内容显示到组件中
    列表框1.置请求加载项目回调((数据集合,索引) =>{
        ' 创建一个标签组件、用于显示文本内容
        变量 局_标签 = 创建 标签()
        ' 自定义设置标签的外观
        局_标签.字体大小 = "20px"
        局_标签.内边距 = "10px"
        局_标签.文本颜色 = "#009956"
        ' 监听标签被单击事件
        局_标签.置被单击回调((源对象,事件源) =>{
            弹出提示("项目" + 索引 + "被单击")
        })
        ' 这里需要注意：
        ' 这里的参数 数据集合 为上一步我们添加的项目数据
        ' 参数索引是浏览器返回给我们，告诉我们需要渲染第几个数据
        局_标签.文本 = 数据集合[索引]
        ' 将标签对象返回给浏览器，浏览器将该标签添加到列表中
        返回 局_标签
    })
    ' 渲染并显示列表
    列表框1.渲染()
结束 函数

运行后效果：

自定义宫格内容

宫格内容类似表格、宫格方式展示，下方为一个渲染图片与文本的宫格内容展示演示代码。

代码示例：

事件 页面加载完毕()
    渲染图文宫格框()
结束 事件


函数 渲染图文宫格框()
    宫格框2.横向对齐方式 = "space-between"
    宫格框2.边框 = "1px #cc1 solid"
    宫格框2.边框圆角 = "2px"
    宫格框2.内边距 = "10px"
    变量循环(i = 0,30,1)
        变量 项目对象 = { }
        项目对象.图片 = "./static/head.jpg"
        项目对象.标题 = "项目" + i
        宫格框2.添加项目(项目对象)
    结束循环
    宫格框2.置请求加载项目回调((数据集合,索引)=>{
        变量 局_根布局 = 创建 弹性布局()
        局_根布局.方向 = "column"
        '局_根布局.边框 = "1px #cc1 solid"
        变量 局_图片框 = 创建 图片框()
        局_图片框.宽度 = "180px"
        局_图片框.高度 = "120px"
        局_图片框.边框 = "1px #ccc solid"
        局_图片框.边框圆角 = "4px"
        局_图片框.图片 = 数据集合[索引].图片
        变量 局_标题标签 = 创建 标签()
        局_标题标签.文本 = 数据集合[索引].标题
        ' 将图片、标题添加到根布局
        局_根布局.添加组件(局_图片框)
        局_根布局.添加组件(局_标题标签)
        ' 注册根布局点击事件
        局_根布局.置被单击回调(()=>{
            弹出提示("图文宫格项目：" + 索引 + "被单击")
            调试输出(数据集合[索引])
        })
        返回 局_根布局
    })
    宫格框2.渲染()
结束 函数

运行后效果：

更多列表内容的自定义请参考官方安装包中自带的例程。