美文网首页
sectionlist里cell横向排列的方法

sectionlist里cell横向排列的方法

作者: zhangwenqiang | 来源:发表于2018-05-08 10:20 被阅读289次

    总体思路是每一个section放一个大cell,这个大cell里放一个flatlist,再用flatlist实现小cell的横向排列,代码如下:
    const arySections = [{key:"step1month4",stepName:'第1阶段',month:'2017年04月',startDay:17,count:12,cells:[1,1,2,2,3,6,4,5]},
    {key:"step2month4",stepName:'第2阶段',month:'2017年04月',startDay:29,count:2,cells:[5]},
    {key:"step2month5",month:'2017年05月',startDay:1,count:8,cells:[5]}
    ];
    <SectionList
    style={{flex: 1, marginTop: nTopMargin}}
    renderItem={this.renderBigItemView.bind(this)}
    renderSectionHeader={this.renderSectionHeader.bind(this)}
    contentContainerStyle={styles.listViewStyle}// 设置cell的样式
    sections={this.getSections()}
    keyExtractor={(item, index) => index}
    // horizontal={false}
    />
    renderBigItemView({item}) {
    let arySmallItems = item.smallItems;
    let nCellColumn = screenWidth <= 320 ? 5 : 6;
    return (
    <View style={{flex: 1, marginTop: nTopMargin, backgroundColor: 'white'}}>
    <FlatList
    style={{flex: 1, marginTop: 10, marginBottom: 10, backgroundColor: 'white'}}
    data={arySmallItems}
    renderItem={this.renderSmallItemView.bind(this)}
    horizontal={false}
    numColumns={nCellColumn}
    keyExtractor={(item, index) => index}
    />
    </View>

        );
    }
    

    renderSmallItemView({item}) {return (<cell/>)}
    // 数据源
    getCells(nSection) {
    var Arr = [];
    let sectionData = this.state.dataSource[nSection];
    let aryCellsState = sectionData.cells;

        for (var i = 0; i < sectionData.count; i++) {
            let pCellInfo = aryCellsState.length > i ? aryCellsState[i] : aryCellsState[aryCellsState.length - 1];
            Arr.push(
                {
                    key: 'key:' + i + ',section:' + nSection,
                    state: pCellInfo.state,
                    day: sectionData.startDay + i,
                    month: sectionData.month,
                    dayCode: pCellInfo.dayCode
                });
        }
        return Arr;
    }
    
    getSections() {
        var Arr = [];
        let arySections = this.state.dataSource;
        if (Array.isArray(arySections)) {
            for (var i = 0; i < arySections.length; i++) {
                Arr.push({
                    data: [{smallItems: this.getCells(i)}], // 只显示一个cell
                    title: 'key' + i,
                    stepName: arySections[i].stepName,
                    month: arySections[i].month
                });
            }
        }
        return Arr;
    }

    相关文章

      网友评论

          本文标题:sectionlist里cell横向排列的方法

          本文链接:https://www.haomeiwen.com/subject/xhjirftx.html