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>