taro选择城市

先看下效果

Jan-08-2021 13-36-07.gif

数据来源 @bang88/china-city-data
index.js代码如下

import React, { Component ,useState,useEffect} from 'react'
import { View, Button, Text,Image,Input,ScrollView } from '@tarojs/components'
import Taro from "@tarojs/taro";
import './index.scss'
import Images from "../../images/Images";
import chinaData from '@bang88/china-city-data'

const initTabs = [
  {title:'请选择'},
  {title:'请选择'},
  {title:'请选择'}
]

export default ()=>{

  const [tabIndex,setTabIndex] = useState(0)

  const [screenW,setScreenW] =useState(375)

  const [zone,setZone] = useState({
    province:null,
    county:null,
    city:null
  })


  const animation = Taro.createAnimation({
    duration:300,
    timingFunction:'ease'
  })
  const [ani,setAni] = useState(animation)
  const navigateTo = (url) => {
    Taro.navigateTo({ url });
  }


  useEffect(()=>{
    const info = Taro.getSystemInfoSync()
    // console.log(info)
    const { screenWidth } = info
    setScreenW(screenWidth)

    console.log(chinaData)
  },[])


  useEffect(()=>{
    animation.translateX(-screenW * tabIndex).step()
    setAni(animation.export())
  },[tabIndex])




  function renderPageView(pageNum){


    let data = []
    if(pageNum === 0){
      data = chinaData
    }else if(pageNum === 1){
      if(zone.province){
        data = zone.province.children
      }
    }else if(pageNum === 2){
      if(zone.county){
        data = zone.county.children
      }
    }

    return (
      <View className={'list'} >

        {
          data.map((item,index)=>{

            let isSelect = false
            if(pageNum === 0 && zone.province ){
              isSelect = zone.province.value === item.value
            }else if(pageNum === 1 && zone.county){
              isSelect = zone.county.value === item.value
            }else if(pageNum === 2 && zone.city){
              isSelect = zone.city.value === item.value
            }

            return (
              <View className={isSelect ? 'list-item list-item-select' : 'list-item'}
                    key={index}
                    onClick={()=>{
                      console.log(item)
                      if(pageNum === 0) {
                        if(!zone.province || zone.province.value !== item.value){
                          setZone({
                            province:item,
                            county:null,
                            city:null
                          })
                          setTabIndex(1)
                        }
                      }else if(pageNum === 1){
                        if(!zone.county || zone.county.value !== item.value){
                          setZone(prevState => ({
                            ...prevState,
                            county:item,
                            city:null
                          }))
                          setTabIndex(2)
                        }
                      }else if(pageNum === 2){
                        if(!zone.city || zone.city.value !== item.value){
                          setZone(prevState => ({
                            ...prevState,
                            city:item
                          }))
                        }
                      }


                    }}
              >
                <Text>{item.label}</Text>
                <Image src={isSelect ? Images.gou_select : Images.gou} className={'gou-image'} mode={'aspectFit'}/>
              </View>
            )
          })
        }

      </View>
    )
  }


  function getTitle(index) {
    if(index === 0){
      return zone.province ? zone.province.label : '请选择'
    }
    if(index === 1){
      return zone.county ? zone.county.label : '请选择'
    }
    if(index === 2){
      return zone.city ? zone.city.label : '请选择'
    }
  }

  return (
    <View>

      <View className={'tabbar'} >

        {
          initTabs.map((item,index)=>{
            const isSelect = index === tabIndex

            return (
              <View className={isSelect ? 'tabbar-item select' : 'tabbar-item'}
                    key={index}
                    onClick={()=>{
                      console.log(index)
                      if(index > 0 && !zone.province) return
                       if(index === 2 && !zone.county) return;


                      setTabIndex(index)

                    }}
              >
                {getTitle(index)}
              </View>
            )
          })
        }
      </View>


      <View className={'tab'}
            animation={ani}
            style={{width:screenW * initTabs.length}}
      >
        {renderPageView(0)}
        {renderPageView(1)}
        {renderPageView(2)}
      </View>



    </View>
  )
}

index.scss

.tabbar{
  position: fixed;
  top:0;left:0;right: 0;
  display: flex;
  background-color: white;
  z-index: 10;
  .tabbar-item{
    height:80px;display: flex;justify-content: center;align-items: center;
    margin:0 20px 0 20px;
    font-size: 28px;
    border-bottom: 5px  solid #ffffff;
  }
  .select{
    border-bottom: 5px  solid #fe090e;
  }
}



.tab{
  margin-top: 80px;
  display: flex;
  transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
}

.list{
  display: inline-block;
  //width:100%;
  width:calc(100vw);
}


.list-item{
  width: calc(100% - 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:100px;
  padding:0 40px 0 40px;
  font-size: 28px;
  color: #333333;
  .gou-image{
    width:40px;height:40px;
  }
}
.list-item-select{
  color:#fe090e
}