美文网首页
swipe list view使用

swipe list view使用

作者: 米开朗骑騾 | 来源:发表于2018-12-25 18:01 被阅读0次

使用时遇到两个问题
1.右滑点击删除时 setStat({})刷新数据时,下一行会自动展开右侧删除
要求:点击删除改变数据后,列表没有展开的cell
解决:

ref='_swipeListViewRef'

onPress={() => {
        this.refs._swipeListViewRef.onRowOpen((rowKey, rowMap) => {
                 rowMap[rowKey].closeRow()
        });

           this.state.dataSource.splice(rowData.index,1);
          this.setState({})
           // this.setState({
         //     deleteIndex:rowData.index,
            // },() => {
             //     this.props.deleteNoticeRequest(rowData.item.bid);
               // })
              }}

2.对于不同高度的cell,删除上一个时,其底部的删除View其实还在,导致高度不一致,露出已删除cell的高度

问题图: IMG_0041.PNG

要求:动态计算高度,每删除一行,剩下的底部删除View和cell高度一致
解决:
添加属性:

recalculateHiddenLayout={true}
屏幕快照 2018-12-25 下午5.55.58.png

完整代码:

<SwipeListView
                        useFlatList
                        ref='_swipeListViewRef'
                        data={this.state.dataSource}
                        renderItem={this._renderItem.bind(this)}
                        recalculateHiddenLayout={true}
                        closeOnScroll={true}
                        // leftOpenValue={sizeDp(75)}右滑
                        rightOpenValue={-sizeDp(75)}
                        // stopLeftSwipe={100}右滑最大值
                        stopRightSwipe={-100}
                        disableRightSwipe={true}
                        ItemSeparatorComponent={this._separator}
                        renderHiddenItem={(rowData) => (
                            <View style={{
                                alignItems: 'center',
                                flexDirection: 'row',
                                justifyContent: 'flex-end',
                                flex: 1,
                                backgroundColor:'red',
                            }}>
                                <TouchableOpacity
                                    style={{
                                        height:sizeDp(90),
                                        width:sizeDp(75),
                                        justifyContent:'center',
                                        alignItems:'center',
                                    }}
                                    onPress={() => {

                                        this.refs._swipeListViewRef.onRowOpen((rowKey, rowMap) => {
                                            rowMap[rowKey].closeRow()
                                        });

                                        this.state.dataSource.splice(rowData.index,1);
                                        this.setState({})
                                        // this.setState({
                                        //     deleteIndex:rowData.index,
                                        // },() => {
                                        //     this.props.deleteNoticeRequest(rowData.item.bid);
                                        // })
                                    }}
                                >
                                    <Text style={{fontSize:fontDp(15),color:'white',fontWeight:'bold'}}>删除</Text>
                                </TouchableOpacity>
                            </View>
                        )}
                        // onRowOpen={(rowKey, rowMap) => {
                        //     if (rowMap[this.state.deleteIndex] !== undefined){
                        //         setTimeout(() => {
                        //             rowMap[rowKey].closeRow()
                        //         }, 1000)
                        //     }
                        // }}
                        keyExtractor={this._keyExtractor}
                    />

参考
参考
参考

相关文章

网友评论

      本文标题:swipe list view使用

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