求职小程序列表基础配置-移动端通用列表模块配置教程(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。
- 代码:无