zoukankan      html  css  js  c++  java
  • react native仿企查查地区下拉

    只写了2级,三级同理

      {/*筛选地区*/}
                                <View style={[{backgroundColor: 'pink', height: 300, flexDirection: 'row',},]}>
                                    <View style={{ '40%'}}>
                          // 这里是一级地区(省) <ScrollView contentContainerStyle={{ '100%', backgroundColor: 'orange'}}> { area.map((val, i) => { return ( <TouchableWithoutFeedback onPress={() => this.clickArea(val, i)}>
                                      //这里的index是用来做选中后的样式 <View style={[{backgroundColor: this.state.index === i ? '#eee' : '#fff'}]}> <View style={{padding: 10, borderBottomColor: '#eee', borderBottomWidth: 1 / PixelRatio.get()}}> <Text style={{fontSize: 13, color: '#333'}}>{val.title}</Text> </View> </View> </TouchableWithoutFeedback> ) }) } </ScrollView> </View>                     // 这里是二级地区(市) <ScrollView> {
                            // 这里的this.state.index是点击一级地区的时候将其索引传给函数给state中的index赋值,索引这个index就是一级地区的索引 area[
    this.state.index].lists.map((item, k) => { return ( <TouchableWithoutFeedback onPress={() => this.secClickArea(item, k)}> <View style={{backgroundColor: '#eee'}}> <View style={[{padding: 8, borderBottomColor: '#fcfcfc', borderBottomWidth: 1 / PixelRatio.get()}, styles.flex]}> <Text style={{fontSize: 13, color: '#666'}}>{item}</Text> </View> </View> </TouchableWithoutFeedback> ) }) } </ScrollView>

                        // 三级可以写这里,然后点击二级的时候将二级点击的索引传给函数给state中的值,然后再放这里即可 </View>
  • 相关阅读:
    react-redux简单使用
    jQuery——Js与jQuery的相互转换
    移除HTML5 input在type="number"时的上下小箭头
    echarts 5.0 地图
    Vue echarts 设置初始化默认高亮
    echarts 渐变色
    隐藏滚动条css
    echarts 柱状图--圆角
    echarts 气泡图--option
    Vue 圆柱体组件
  • 原文地址:https://www.cnblogs.com/lude1994/p/11102188.html
Copyright © 2011-2022 走看看