| 【React | 您所在的位置：网站首页 › react三级联动效果 › 【React |
【React
|
提示：React-native类商城分类联动 效果展示
提示：以下是本篇文章正文内容，下面案例可供参考 具体案例地址github案例代码 组件主要代码 renderRootCate() {//左边分类列表 const { rootCateData, bgColor } = this.state const { rootEndReached } = this.props return ( this.flatList = flatList} data={rootCateData} ListHeaderComponent={() => ()} ListFooterComponent={() => ()} // ItemSeparatorComponent={() => } renderItem={(e) => this.renderRootItem(e.item, e.index)} onEndReachedThreshold={20} showsVerticalScrollIndicator={false} onEndReached={() => rootEndReached()} /> ) } renderRootItem = (item, index) => {//左边菜单节点 const { rootCateData, selectedRootCate, mainColor, bgColor } = this.state const { needScrollTo } = this.props return ( { selectedRootCate !== index && } { setTimeout(() => { (rootCateData.length - index) * ROOT_HEIGHT > screenH - HEADER_HEIGHT - ROOT_HEIGHT ? this.flatList.scrollToOffset({ animated: true, offset: index * ROOT_HEIGHT }) : null this.sectionList.scrollToLocation({ itemIndex: 0, sectionIndex: needScrollTo ? index : 0, animated: true, viewOffset: 0 }) }, 100) this.setState({ selectedRootCate: index, rootSelItem: item, isScroll: false }) }} > {item.firstCateName} ) } renderItemCate() {//右边菜单 const { cateData, selectedRootCate, rootSelItem } = this.state const { renderSectionHeader, renderItem, needScrollTo, onCateEndReached, onCateRefresh } = this.props return ( this.sectionList = ref} renderSectionHeader={(item) => renderSectionHeader ? renderSectionHeader(item) : this.sectionComp(item)} renderItem={(data) => renderItem ? renderItem(data) : this.renderItem(data)} sections={cateData} // ListEmptyComponent={} ItemSeparatorComponent={() => } ListHeaderComponent={() => } showsVerticalScrollIndicator={false} keyExtractor={(item, index) => 'key' + index + item} onEndReached={() => onCateEndReached && onCateEndReached()} onViewableItemsChanged={(e) => { needScrollTo && this.scrollRootSel(e) }} onScrollBeginDrag={(e) => { this.setState({ isScroll: true }) }} onScrollAnimationEnd={() => { this.setState({ isScroll: false }) }} /> ) } renderItem(item) {//右边菜单二级分类 const { cateData, } = this.state const { renderCell, needScrollTo } = this.props let sectionIndex = item.section.rootIndex let data = item?.section?.data return item.index === 0 ? { data.map((cell, index) => renderCell ? renderCell(cell, sectionIndex, index) : this.renderCell(cell, sectionIndex, index)) } { needScrollTo && { item?.section?.rootIndex !== cateData?.length - 1 ? : //最后一个菜单的空白占位 } } : null } scrollRootSel = (e) => {//右边菜单滚动时左边菜单跳到相应选项 const { cateData, isScroll, rootCateData } = this.state let currentIndex = e?.viewableItems[0]?.section?.rootIndex if (isScroll) { this.setState((preveState, preveProps) => ({ selectedRootCate: currentIndex, rootSelItem: cateData[currentIndex] }), () => { (rootCateData.length - currentIndex) * ROOT_HEIGHT > screenH - HEADER_HEIGHT ? this.flatList.scrollToOffset({ animated: true, offset: currentIndex * ROOT_HEIGHT }) : null }) } } 使用 render() {//左右联动菜单 return ( { }} itemOnPress={(item, sectionIndex, index) => alert(`点击了第${sectionIndex}组中的第${index}个商品`)} needScrollTo // onCateEndReached={() => {}} /> ) } render() {//自定义非联动菜单 const { selectedRootCate } = this.state return ( { }} cateData={[data.cateData[selectedRootCate]]} renderCell={(item, sectionIndex, index) => this.renderCell(item, sectionIndex, index)} renderSectionHeader={(item) => this.sectionComp(item)} selRootCateChange={(index, item) => { this.setState({ selectedRootCate: index }) }} /> ) } 数据格式提示：一般右边菜单都是根据左边选中的再进行请求，因此左右菜单的数据是分开传的 { "rootCateData":[ { "firstCateName":"香蕉", "firstCateId":0 } ,{ "firstCateName":"苹果", "firstCateId":1 } ,{ "firstCateName":"车厘子", "firstCateId":2 } ], "cateData":[ { "rootIndex":0, "secondCateName":"香蕉", "data":[ { "id":100010, "img":"", "name":"本地蕉", "sectionId":0 } ,{ "id":100011, "img":"", "name":"国产蕉", "sectionId":0 } ] } ,{ "rootIndex":1, "secondCateName":"苹果", "data":[ { "id":100020, "img":"", "name":"红苹果", "sectionId":1 } ,{ "id":100021, "img":"", "name":"青苹果", "sectionId":1 } ] } ,{ "rootIndex":2, "secondCateName":"车厘子", "data":[ { "id":100030, "img":"", "name":"车厘子A", "sectionId":2 } ,{ "id":100031, "img":"", "name":"车厘子JJ", "sectionId":2 } ] } ] } |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |