0.0.3 • Published 7 years ago

nuke-biz-list v0.0.3

Weekly downloads
8
License
-
Repository
gitlab
Last release
7 years ago

list

  • category: BizComponent
  • chinese: nuke-biz-list的作用是，封装了下拉刷新，加载更多等功能，只需要传 "请求数据的方法" 和 "渲染列表的方法"，就可以实现列表的展示、刷新、加载更多，为空及错误页面的展示。
  • type: 业务组件

属性

参数说明类型默认值是否必传
getListByPage获取列表数据 (currentPage: number) => PromiseFunction无是
renderItemlistView renderRow调用的方法Function无是
showRefresh是否展示 refresh（包括在默认Empty视图是否显示刷新按钮）booleantrue否
renderHeader渲染header（与默认的refresh二选一）Function端上统一的refresh否
renderFooter渲染footerFunction列表加载信息提示否
showError是否展示Error页面booleantrue否
renderError渲染Error页面（如果不设置，则使用默认错误页面）Function无否
onError页面出错时触发Function无否
showEmpty是否展示Empty页面booleantrue否
emptyText采用默认空页面时，展示的文案string'没有更多内容了~'否
renderEmpty渲染Empty页面（如果不设置，则使用默认空页面）Function无否
showLoadEndCount当item数量超过这个值时, 才会展示 加载完的提示number1否
footerStyle设置底部样式object与端底部"加载更多" 样式规范统一否
stylelist的样式object与端 "列表" 样式规范统一否
onEndReachedThreshold距离多少开始加载下一屏，数字单位默认 remNumber500否

列表数据格式

对于返回的列表数据格式有要求
    1. data字段 （必须）
    2. currentPage字段，当前页面 （必须）
    3. hasMore字段，是否还有数据 （必须）
    4. list字段，列表数组 （必须）

{
  "data": {
    "currentPage": 1,
    "pageSize": 20,
    "hasMore": true, 
    "list": [{ 
      "name": "jack"
    }, {
       "name": "jack"
    }, {
       "name": "jack"
    }, {
       "name": "jack"
    }, {
       "name": "jack"
    }]
  }
}

使用方式

  1. 初次使用需要安装依赖：
tnpm install nuke-biz-list
  1. 通过import引用
import {createElement, Component,render } from 'rax';
import {View,Text,Page} from 'nuke';
import List from 'nuke-biz-list'

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        
        this.getData = this.getData.bind(this);
        this.renderItem = this.renderItem.bind(this);
    }
    
    getData(currentPage) {
      return new Promise((resolve, reject) => { 
        /*
        return reject({
          msg: '出错啦~出错咯~出错啊~',
        });
        */
        setTimeout(() => {
          const resp =  {
            data: {
              currentPage: currentPage,
              pageSize: 5,
              hasMore: currentPage <= 3,
              list: [{
                name: 'jack',
              }, {
                name: 'jack',
              }, {
                name: 'jack',
              }, {
                name: 'jack',
              }, {
                name: 'jack',
              }]
            }
          };
          
          /*
          if (currentPage === 2) {
              return reject({
                msg: '出错啦~出错咯~出错啊~',
              });
          }
          */
                        
          resolve (resp);
        }, 500);
      })
    }
    
    
    renderItem(item, index) {
      return (
        <View style={styles.item}>
          <Text style={styles.label}>这里第{index+1}条记录: </Text>
          <Text style={styles.name}>his name is: {item.name}</Text>
        </View>
      );
    }
    
    render() {
      const listProps = {
        getListByPage: this.getData,
        renderItem: this.renderItem,
        showLoadEndCount: 5,
      };
      
      return (
        <View style={styles.container}>
          <Text style={[styles.pageInfo, styles.label]} >nuke-biz-list的demo</Text>
          <List {...listProps} />
        </View>
      );
    }
}

const styles = {
  pageInfo: {
    width: 750,
    padding: 30,
    fontSize: 36,
    fontColor: '#3d4145',
    backgroundColor: '#999',
  },
  container: {
    display: 'flex',
    flex: 1,
  },
  item: {
    flex: 1,
    marginLeft: 30,
    marginRight: 30,
    paddingTop: 30,
    paddingBottom: 30,
    borderBottomType: 'solid',
    borderBottomColor: '#DCDEE3',
    borderBottomWidth: 1,
  },
  label: {
    fontSize: 28,
    fontColor: '#c4c6cf',
  },
  name: {
    fontSize: 28,
    fontColor: '#3d4145',
    paddingLeft: 60,
    marginTop: 20,
  },
}

render(<App/>);



nukemobilenue-biz
@infinitebrahmanuniverse/nolb-nuk@everything-registry/sub-chunk-2353@zalastax/nolb-nuk
0.0.3

7 years ago