antd-mobile中listView基本使用和碰到的问题（不想耽误人，这个只是很久前写的一个demo）

发布: 2017-06-09 23:26:28标签: react

不想耽误人，这个只是很久前写的一个demo，没有技术含量

点击进入 《官网地址》

Q: 在dataSourse中设置了很多数据，即使是本地静态的数据，页面上也只显示10条？

listView默认把数据放在页面上10条，如果10条数据在页面显示高度不高过容器，就不会刷新，再次更新（最新文档有设置默认加载个数介绍）

01import React from 'react'
02import {Flex, ListView} from '../../component'
03
04const {Component, PropTypes} = React
05
06// 虚拟数据
07const dataItem = {
08  img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
09  title: 'Meet hotel',
10  des: '不是所有的兼职汪都需要风吹日晒',
11}
12const data = []
13for (let i = 0; i < 100; i++) {
14  dataItem.key = i
15  data.push(dataItem)
16}
17
18class Bargain extends Component {
19  constructor (props) {
20    super(props)
21    const dataSource = new ListView.DataSource({
22      rowHasChanged: (row1, row2) => row1 !== row2,
23    })
24    this.state = {
25      dataSource: dataSource.cloneWithRows({}),
26      isLoading: true,
27    }
28  }
29
30  componentDidMount () {
31    this.setState({
32      dataSource: this.state.dataSource.cloneWithRows(data),
33      isLoading: false,
34    })
35  }
36
37  static propTypes = {
38    dispatch: PropTypes.func
39  }
40  renderList() {
41    const row = (dataRow) => {
42      return (
43        <Flex style={{height: 200}}>
44          <p>{dataRow.title}</p>
45          {dataRow.des}
46        </Flex>
47      )
48    }
49    return (
50      <ListView
51        style={{
52          height: document.documentElement.clientHeight,
53          overflow: 'auto',
54        }}
55        dataSource={this.state.dataSource} // 渲染的数据源
56        renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
57          {this.state.isLoading ? '加载中' : '加载完成'}
58        </div>)}
59        renderRow={row} // 单条数据
60        pageSize={4} // 每次渲染的行数
61        scrollRenderAheadDistance={500} // 当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行
62        scrollEventThrottle={20} // 控制在滚动过程中，scroll事件被调用的频率
63        onEndReachedThreshold={10} // 调用onEndReached之前的临界值，单位是像素
64                onEndReached={() => {}} // 上拉加载事件
65      />
66    )
67  }
68  render () {
69    return (
70      <div
71        className='bargain-container'
72      >
73        {data.length === 0 ? (<h1>暂时没有商品</h1>) : this.renderList()}
74      </div>
75    )
76  }
77}
78
79export default Bargain
80
复制代码