AssociatedScrollView

横向联动 Scrollview 组件

用途

AssociatedScrollView 是ScrollView 的增强，用途是：每个 Cell 中的 AssociatedScrollView 都能联动滚动，实现超宽表格的效果。

如上解释，我们约定 AssociatedScrollView 只能作为 Cell、Header 的第一层子组件使用。

如何使用

此组件为业务组件，不在 nuke 大包中，需要单独安装依赖。

npm install nuke-biz-associated-scroll-view --save-dev

/** @jsx createElement */
import {createElement, Component,render } from 'rax';
import {View, Text,Image, Touchable,Cell,Header,ListView} from 'nuke';
import AssociatedScrollView from 'nuke-biz-associated-scroll-view';

class ListViewDemo extends Component {
    constructor() {
        super();
        this.state = {
            data: [
                {
                    data: [11,22,11,33,11,234,12,12,544,11],
                },
                {
                    data: [11,211,13,33,11,23,12,12,15,10],
                }
            ]
        }
    }
    renderItem (item, index){
        let arr=[];
        arr.push(<AssociatedScrollView style={[styles.hScroller]}>
                {item.data.map((dataItem,k)=>{
                    return <View style={styles.dataItem}><Text>{dataItem}</Text></View>
                })}
              
          </AssociatedScrollView>);
        return arr;

    }

    render(){
        return (
           <ListView _autoWrapCell={false} showScrollbar={false} style={styles.listContainer}>
            {
                this.state.data.map((item,index)=>{
                    return (
                        <Cell>
                        {this.renderItem(item,index)}
                        </Cell>
                    )
                })
            }

          </ListView>

        )
    }
}

const styles = {
    listContainer:{
        flex:1
    },
    cellItem: {
        width: '750rem',
        height: '200rem',
        paddingTop:'20rem',
        flexDirection:'row',
        borderBottomWidth:'1rem',
        borderBottomStyle:'solid',
        borderBottomColor:'#cccccc',
    },
    text:{
        color:'#666666'
    },
    hScroller:{
        flexDirection:'row',
        height:'200rem',

    },
    dataItem:{
        width:'200rem',
        height:'200rem',
        justifyContent:'center',
        alignItems:'center',
    }
    
}
render(<ListViewDemo/>);

API

参数 | 说明 | 类型 | 默认值 -----|-----|-----|----- showsHorizontalScrollIndicator |是否展示滚动条|boolean| false horizontal| 是否横向|boolean|true,默认横向，且暂不支持纵向联动