react实现城市列表

---

前言

适用react实现的城市列表，具备吸顶和城市搜索定位等功能。

---

一、效果图

二、使用步骤

1.引入库

代码如下：

import React from "react";
import {
    connect } from 'dva';
import VerticaLayout from '@/pages/tags/verticaLayout';

import {
    Row, Col } from 'antd'
import CheckMenu from "@/utils/checkMenu"
import styles from './citySelect.less'

VerticaLayout请看我的另一篇博客。固定头部及解决转态栏遮挡问题

2.函数

1.getLocalCity

/**
 * 页面载入plus后的回调
 * @param {function} func 
 */
const plusReady = (func) => {
   
    if (window.plus) {
   
        func();
    } else {
   
        document.addEventListener('plusready', func, false);
    }
}
/**
 * 检查手机定位权限是否开启
 */
const getLocalCity = () => {
   //不能单独使用需注册plus或在手机中,检查定位权限状态
    return new Promise((resolve, reject) => {
   
         plusReady(function () {
   
            const pp = plus.navigator.checkPermission('LOCATION');
            switch (pp) {
   
                case 'authorized':
                    getLocationCity().then((res) => {
   
                        resolve(res)
                    })
                    // plus.nativeUI.alert('已开启定位权限');
                    break;
                case 'denied':
                    // plus.nativeUI.alert('已关闭定位权限');
                    openPermissionPos()

                    resolve({
   })
                    break;
                case 'undetermined':
                    openPermissionPos()
                    resolve({
   })
                    // plus.nativeUI.alert('未确定定位权限');
                    break;
                // case 'unknown':
                //     // plus.nativeUI.alert('无法查询定位权限');
                //     break;
                default:
                    // plus.nativeUI.alert('不支持定位权限');
                    Toast.info("请检查手机定位功能！" + pp)
                    getLocationCity().then((res) => {
   
                        resolve(res)
                    }).catch(e=>{
   
                        reject(e)
                    })
                    break;
            }

        })
    })


}

检查手机定位权限是否开启：其中getLocationCity为获取当前所在城市的方法。请自行实现

2.getSession

/**
 * 得到session中的原数据
 * @param {string} str json字符串
 * @param {*} default_ 在str为空时返回的默认数据
 * @returns {object} 
 */
export const getSession = (str, default_ = {
   }) => {
   //从对象中得到session中的原数据
    if (str) {
   
        return JSON.parse(str)
    }
   
    return default_
    
    
}

sesion值不存在则返回默认值

3、输入数据

1.数据结构

const citySelected = [
    {
   
        title: "当前城市",
        value: "current",
        multiSelect: false,//d单选
        default:"定位失败",
        children: []
    },
    {
   
        title: "历史记录",
        value: "history",
        multiSelect: false,
        default:"",
        children: []
    },
    {
   
        title: "热门城市",
        value: "popular",
        multiSelect: false,
        default:"",
        children:  [
            {
   
                value: '北京市',
                label:'北京市',
                selected: false,
            
            },
            {
   
                value: '昆明市',
                label: '昆明市',
                selected: false,
               
            },
            {
   
                value: '济南市',
                label: '济南市',
                selected: false,
                
            },
            {
   
                value: '天津市',
                label: '天津市',
                selected: false,
                
            }
        ],
    },
    
]

2、城市数据

通过调用getListData方法设置state里的cityList值，从而渲染城市列表。

// 获取城市数据并对其格式化
    getListData = () => {
   
        return new Promise((resolve, rejects) => {
   
            const {
    dispatch } = this.props;

            dispatch({
   
                type: 'utils/findCityDict',

            }).then(() => {
   
                const {
    cityList } = this.props.utils
                const temp = []
                Object.keys(cityList).forEach((item, index) => {
   
                    const data = []
                    cityList[item].forEach(jj => {
   
                        // 格式化城市数据
                        data.push({
    
                        label: jj.cityName ,
                        provinces:[jj.provinceName,jj.cityName]});
                    });
                    temp.push({
   
                        header: item,
                        'data': data
                    })