antd-mobile中listView遇到的坑

来源：互联网发布：红楼梦87版细节知乎编辑：程序博客网时间：2024/05/29 04:42

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

listView默认把数据放在页面上10条，如果10条数据在页面显示高度不高过容器，就不会刷新，再次更新

import React from 'react'import {Flex, ListView} from '../../component'const {Component, PropTypes} = React// 虚拟数据const dataItem = {  img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',  title: 'Meet hotel',  des: '不是所有的兼职汪都需要风吹日晒',}const data = []for (let i = 0; i < 100; i++) {  dataItem.key = i  data.push(dataItem)}class Bargain extends Component {  constructor (props) {    super(props)    const dataSource = new ListView.DataSource({      rowHasChanged: (row1, row2) => row1 !== row2,    })    this.state = {      dataSource: dataSource.cloneWithRows({}),      isLoading: true,    }  }  componentDidMount () {    this.setState({      dataSource: this.state.dataSource.cloneWithRows(data),      isLoading: false,    })  }  static propTypes = {    dispatch: PropTypes.func  }  renderList() {    const row = (dataRow) => {      return (        <Flex style={{height: 200}}>          <p>{dataRow.title}</p>          {dataRow.des}        </Flex>      )    }    return (      <ListView        style={{          height: document.documentElement.clientHeight,          overflow: 'auto',        }}        dataSource={this.state.dataSource}        renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>          {this.state.isLoading ? '加载中' : '加载完成'}        </div>)}        renderRow={row}        pageSize={4}        scrollRenderAheadDistance={500}        scrollEventThrottle={20}        onEndReachedThreshold={10}      />    )  }  render () {    return (      <div        className='bargain-container'      >        {data.length === 0 ? (<h1>暂时没有商品</h1>) : this.renderList()}      </div>    )  }}export default Bargain

阅读全文

0 0