移动端事项管理列表标准设计

2024-11-08 18:46:13• bianchengjichu • 阅读 594

概述：

在移动端事项管理中的全部事项，使用列表来展现。

关于列表通常的标准操作有以下几个方面搜索条件管理、分页加载管理、选择其中一项跳转！

在本项目管理系统中事项中形成状态管理，包含全部事项、待分配、已分配、未完成、已完成、待检查、已检查等状态统一管理。

标准方法的设计收益

加快页面开发，而无须考虑命名等

在UniApp的列表页标准方法进行管理

1、onload(e)

系统级标准方法

用于得到上一个页面传递的参数，以及初始化,其中e包含相关的参数信息。

初始化相关的参数，得到比如设备的高度，状态栏高度等等

onLoad(e){varthat=this;varsys=()=+44===//得到第一页的数据='loading'=;},

2、onShow

系统级标准方法

在显示的时候进行界面初始化，这里调用getList方法

onShow(){();},

3、methods

用于自定义种方法，用于针对UniApp中各个属性或者事件的定义。为了统一对所有的列表进行统一快速开发，制定统一的方法。

包含以下几个

1、GetList:分页得到数据

2、Seach:搜索事件

4、tab切换tabClick，其实也是查询条件一部分，将当前tabIndex与QueryParam其中的一个条件进行对应。

GetList得到分页数据

标准做法在Methods定义标准方法GetList(),不包含任何参数，用于得到列表

所需要定义的查询条件在data中创建一个QueryParams对象

说明

1、因为是列表，所以存在分页，而在单页开发中，随着向下划的过程中，将下一页的数据不断得增加到data下的list.

2、当从后端得到的数据，不足分页大小的时候，说明后端已经没有数据了，在再次下滑的过程的时候就不向后端请求数据

3、从后端的取出的数据时候，可以将总数回填写当前的tab控件的数量上

QueryParam查询条件

将GetList需要的查询条件统一放到当前的对象中

exportdefault{data(){QueryParam:{MatterTitle:"",AssignStatus:-1,IsFinish:-1,PageIndex:1,PageSize:20,TotalCount:0,IsCheck:0}}

这个是方便GetList进行查询的，相当于减少耦合，就是GetList不管其他操作如何设置QueryParam，他只管QueryParam的值就行了.

包含需要查询的字段，分页、以及总数等

当屏幕到底部的时候直接对QueryParam的PageIndex进行加1就可以。

onReachBottom(){++;();},

select(index,item){varthat=this;[index].selected=true;varurl="/pages/matter/matterDetailView?DoCmd=DetailViewCode="+;({url:url})}

比如跳转事项详情页

搜索方法search

search(){varthat=this;=1='loading'=[];for(leti=0;;i++){[i].=0;}();({scrollTop:0})},

1、这里将QueryParam的PageIndex设置为第1页

2、将list数组进行清空

3、将滚动条设置到顶端

共创、共享、共赢！