multis-listview(多状态list)
对ListView的封装,处理多种多个状态
加载方法
- npm install multis-listview
- import List from multis-listview
使用之前
multis-listview有四个静态组件,在需要改变默认的四种状态的样式时进行定义。注意只是为了改变样式,组件的状态由组件的status参数判断
- Empty: 数据为空
- 【 style | style | 非必需 】:改变Empty组件样式
- 【 msg | string | 非必需 】:改变Empty提示文字
- 【 source | object | 非必需 】:图片资源,与Image的Source传入方式相同
- Error: 数据异常全屏展示
- 【 style | style | 非必需 】:改变Error组件样式
- 【 msg | string | 非必需 】:改变Error提示文字
- 【 source | object | 非必需 】:图片资源,与Image的Source传入方式相同
- 【 children | element | 非必需 】:如果 图片+文字 无法满足错误信息显示的需求,可以在Error标签里面写你需要的样式
- Nomore: 没有更多数据
- 【 style | style | 非必需】: 改变Nomore组件样式
- 【 msg | string | 非必需 】:改变Nomore提示文字
- Loading: 是否加载中
- 【 style | style | 非必需】:改变loading样式
- 【 visible | bool | 非必需】:是否展示
- ErrorTip: 有数据错误提示条
- 【 style | style | 非必需】: 改变ErrorTip组件样式
- 【 textStyle | textStyle | 非必需】: 改变ErrorTip提示文字样式
- 【 msg | string | 非必需 】:改变ErrorTip提示文字
- List: 总组件
- 【 pageSize | number | 必须 】:每一页的渲染个数
- 【 totalCount | number | 必须 】: 渲染的数据总数
- 【 renderRow | func | 必须】:渲染样式,参照 ListView 的 renderRow
- 【 reqPromise | func | 必须 】
最重要的
拥有固定的格式,固定参数包括pageSize(每页个数),pageNum(第几页),返回Promise对象,在.then方法后需要传入渲染的数据列表。 - 【 ...ListView.propsTypes | 非必需】: 组件接入所有与ListView有关的参数
- 【 children | element | 非必需 】:想要改变默认的Empty、Error、Loading、Nomore时,在List里按照上面四种组件要求 传入。
重点
- List组件里面传入List.ErrorTip、List.Error、List.Empty、List.Loading、List.Nomore,只是为了改变默认样式,不想改变默认样式是可以不写滴哦。
- 组件内部进行状态的判断
使用举例
- 公共
// 渲染的样式,参考ListView的写法
renderRow = (rowData) => {
return <Text key={rowData.id} style={{ height: 700, marginTop: 30 }}>{rowData.shop.name}</Text>;
}
// 这里是reqPromise的传入格式举例
// 1.传入pageNum, pageSize 2.返回一个Promise对象 3. .then后面传入list展示数据的数据列表
reqPromise(pageNum, pageSize) {
return Request.get({
uri: Request.getApiAddress('INSPECTION', 'answers/InternalControlMonitor'),
data: {
page: pageNum,
size: pageSize,
},
}).then(({ data }) => data.data);
}
- Error状态以及改变默认Error状态
// 1.组件要求的参数未传入
<List />
// 2.无数据时,改变整个界面展示
// 改变默认状态 第一种改变方式 根据需要传入参数
<List pageSize={2} totalCount={5} reqPromise={(pageNum, pageSize) => this.reqPromise(pageNum, pageSize)} renderRow={this.renderRow} >
<List.Error msg={"自己传入的错误提示信息"} source={source} style={{ marginTop: 50 }}/>
</List>
// 改变默认状态 第二种改变方式
<List pageSize={2} totalCount={5} reqPromise={(pageNum, pageSize) => this.reqPromise(pageNum, pageSize)} renderRow={this.renderRow} >
<List.Error>
<View>
<Text>List.Error里面随便写</Text>
<Text>List.Error里面随便写</Text>
<Text>List.Error里面随便写</Text>
</View>
</List.Error>
</List>
- 改变全屏展示的Nomore样式
<List pageSize={2} totalCount={5} reqPromise={(pageNum, pageSize) => this.reqPromise(pageNum, pageSize)} renderRow={this.renderRow}>
<List.Nomore msg={"传入的没有更多加载数据提示信息"} style={{ marginTop: 50 }}/>
</List>
- 改变全屏展示的Loaing样式
<List pageSize={2} totalCount={5} reqPromise={(pageNum, pageSize) => this.reqPromise(pageNum, pageSize)} renderRow={this.renderRow} >
<List.Loading style={{ marginTop: 50 }}/>
</List>
- 改变全屏展示的Empty样式
<List pageSize={2} totalCount={5} reqPromise={(pageNum, pageSize) => this.reqPromise(pageNum, pageSize)} renderRow={this.renderRow} >
<List.Empty msg={"传入的空状态提示样式"} style={{ marginTop: 50 }}/>
</List>
- 改变ErrorTip样式
<List pageSize={2} totalCount={5} reqPromise={(pageNum, pageSize) => this.reqPromise(pageNum, pageSize)} renderRow={this.renderRow} >
<List.ErrorTip msg={"传入的错误提示条"} style={{ backgroundColor: 'red'}} textStyle={{color: 'black'}}/>
</List>