求职小程序列表基础配置-移动端通用列表模块配置教程(1)

求职小程序列表基础配置-移动端通用列表模块配置教程(1)

列表基础配置教程

1. 新增模块

• 步骤：在模块组中右键 -> 添加模块 -> 双击新模块 -> 起名（例如“移动端通用列表模块”） -> 应用模块ID填入（例如“1145”）-> 更新
• 代码：无

2. 显示到前台

• 步骤：在UI界面 -> 右键 -> 添加 -> 逻辑 -> 前端组件 -> 列表组件 -> 右键 -> 列表模块 -> 开发标识 -> 双击 -> 列表组件 -> 粘贴模块标识 -> 组件属性 -> 解重置
• 代码：无

3. 配置标题

• 步骤：输入（例如“招聘广场”）
• 代码：无

4. 配置导航顶栏样式

• 步骤：在UI界面 -> 右键 -> 添加 -> 通用 -> 全局配置 -> 将列表组件拖进全局配置 -> 配置样式（例如nutuiNavbarBackground, nutuiNavbarTitleFontColor, nutuiNavbarTitleFontWeight, nutuiNavbarMarginBottom）
• 代码：例如

  ({
    nutuiNavbarBackground:'#234CFF',
    nutuiNavbarTitleFontColor:'#fff',
    nutuiNavbarTitleFontWeight:'444',
    nutuiNavbarMarginBottom:'3px'
  })
  

5. 隐藏标题栏

• 步骤：配置（例如隐藏标题栏：true）
• 代码：无

6. 配置搜索占位字符

• 步骤：输入（例如“搜索岗位”）
• 代码：无

7. 隐藏搜索栏

• 步骤：配置（例如隐藏搜索栏：true）
• 代码：无

8. 菜单项配置

• 步骤：配置（例如label, title, options）
• 代码：例如

  [
    {
        label: '结算方式',
        title: '结算方式',
        options: [
            { text: '不限', value: '' },
            { text: '日结', value: 'rijie' },
            { text: '月结', value: 'yuejie' },
        ],
    },
    // ...
  ]
  

9. 隐藏菜单栏

• 步骤：配置（例如隐藏菜单栏：true）
• 代码：无

10. 标签页配置

• 步骤：配置（例如title, options）
• 代码：例如

  ({
    title: '结算方式',
    options: [
        { "value": "0", "title": "最新" },
        { "value": "2", "title": "日结" },
        { "value": "3", "title": "周结" },
        { "value": "4", "title": "月结" },
      ],
    })
  

11. 隐藏标签栏

• 步骤：配置（例如隐藏标签栏：true）
• 代码：无

12. 列表查询服务

• 步骤：后台服务 -> 新增 -> 列表查询服务
• 代码：无

13. 列表组件API

• 步骤：配置（例如搜索：'/job/search'）
• 代码：无

14. 测试列表查询

• 步骤：打开调试工具 -> 观察搜索条件变化
• 代码：无

15. 配置列表项节点

• 步骤：在UI界面 -> 右键 -> 添加 -> 逻辑 -> 前端节点 FNode -> 起名（例如“列表项节点”） -> 添加按钮
• 代码：例如

  _F('fNode_CQwyx7YwKp').call
  

16. 显示列表数据

• 步骤：使用（例如_F('fNode_CQwyx7YwKp').callMethod('getItem')） -> 配置按钮文本
• 代码：例如

  _F('fNode_CQwyx7YwKp').callMethod('getItem')?.职位名称 ?? ''
  

17. 配置示例列表项（续）

• 步骤：添加单元格Cell -> 右键 -> 列表项节点 -> 添加 -> 通用 -> 单元格
• 代码：无

18. 配置单元格

• 步骤：右键 -> 单元格 -> 添加 -> 布局 -> 行，再添加 -> 列 -> 右键 -> 列 -> 添加 -> 布局 -> 行，复制出4行 -> 起名（例如“职位名称 行”、“职位标签 行”、“薪资 行”、“地址时间联系 行”）
• 代码：无

19. 配置职位名称行

• 步骤：右键 -> 职位名称行 -> 添加 -> 通用 -> 纯文本 -> 双击纯文本，内容填入（例如_F('fNode_CQwyx7YwKp').callMethod('getItem')?.职位名称 ?? ''）
• 代码：例如

  _F('fNode_CQwyx7YwKp').callMethod('getItem')?.职位名称 ?? ''
  

20. 配置薪资行

• 步骤：右键 -> 薪资行 -> 添加 -> 通用 -> 纯文本，或直接复制 -> 职位名称 -> 纯文本 -> 双击纯文本，内容填入（例如_F('fNode_CQwyx7YwKp').callMethod('getItem')?.薪资范围 ?? ''） -> 修改文字颜色为红色
• 代码：例如

  _F('fNode_CQwyx7YwKp').callMethod('getItem')?.薪资范围 ?? ''
  

21. 配置标签行

• 步骤：右键 -> 标签行 -> 添加 -> 数据展示 -> 标签Tag -> 右键 -> 标签 -> 添加 -> 通用 -> 纯文本 -> 双击纯文本，内容填入（例如“企业认证”） -> 双击标签，设置标签颜色和文本颜色
• 代码：例如

  // 设置标签颜色和文本颜色
  _F('fNode_CQwyx7YwKp').callMethod('getItem')?.企业认证 ?? ''
  

22. 配置地址时间联系行

• 步骤：右键 -> 地址时间联系行 -> 添加 -> 布局 -> 列，复制出3列 -> 起名（例如“地址列”、“时间列”、“联系老板列”） -> 布局方式 Flex
• 代码：无

23. 配置地址列

• 步骤：右键 -> 地址列 -> 添加 -> 通用 -> 纯文本 -> 填入（例如_F('fNode_CQwyx7YwKp').callMethod('getItem')?.详细地址 ?? ''） -> 字体大小 12px
• 代码：例如

  _F('fNode_CQwyx7YwKp').callMethod('getItem')?.详细地址 ?? ''
  

24. 配置时间列

• 步骤：右键 -> 时间列 -> 添加 -> 通用 -> 纯文本 -> 填入（例如_F('fNode_CQwyx7YwKp').callMethod('getItem')?._create?.toString() ?? ''） -> 使用日期函数格式化 -> 文字对齐 居中
• 代码：例如

  _F('date_func').callMethod('dayjs')(_F('fNode_CQwyx7YwKp').callMethod('getItem')?._create * 1000).format('MM月DD日 HH:mm')
  

25. 配置联系老板列

• 步骤：右键 -> 联系老板列 -> 添加 -> 通用 -> 按钮 -> 双击按钮，文本填入（例如“联系老板”） -> 设置按钮样式
• 代码：例如

  // 设置按钮样式
  _F('fNode_CQwyx7YwKp').callMethod('getItem')?.联系老板 ?? ''
  

27. 配置列表框高度

• 步骤：使用calc CSS计算函数来计算列表框的高度。首先，获取页面高度，然后根据需要减去其他元素的高度，例如顶栏、搜索栏等。
• 代码：例如，如果您有一个函数getPageHeight来获取页面高度，您可以使用以下代码：

  `calc(${_F('page_func').callMethod('getPageHeight')} - 50px * 4)`
  

28. 演示小程序调试

• 步骤：为了演示小程序，您需要下载小程序基座和小程序开发者工具。然后，将代码导出到小程序，并在开发者工具中打开appCode.js文件，将代码粘贴进去。
• 代码：无

29. 配置预览API地址头

• 步骤：双击列表查询服务，配置API地址头，确保在预览时能够正确调用API。
• 代码：无