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>
  • 相关阅读:
    Python常用模块之sys
    python操作zip文件
    python的os模块
    [Python模块学习]用qrcode模块生成二维码
    os模块os.walk() 方法和os.path.join()的简单使用
    python操作redis详解
    成员变量和局部变量
    类和对象 引用属性和方法举例
    Java String字符串/==和equals区别,str。toCharAt(),getBytes,indexOf过滤存在字符,trim()/String与StringBuffer多线程安全/StringBuilder单线程—— 14.0
    泛型--面向对象8
  • 原文地址:https://www.cnblogs.com/lude1994/p/11102188.html
Copyright © 2011-2022 走看看