vue实现城市列表选择

成果展示

最后的成果就是下面所展示的内容，因为gif图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和node安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍

准备工作：

　引入axios插件，调用better-scroll第三方插件，本地json文件，可以参考目录中的city.json,有条件的也可以自己去扒

功能分析

1.获取json数据展示城市列表 。

2.侧边字母定位滚动到相应的位置。

3.实现搜索城市

接下来我们开始对组件进行划分：本次案例中，总共划分为五个组件，下面就是组件的划分图

创建city组件，通过父组件获取数据，传递给子组件

City组件

把得到的数据分次传递个对应的子组件，这样有利于网站优化，不用频繁的请数据

export default {
    data () {
        return {
            cities:{}, // 城市列表
            hotCity:[], //热门城市
            letter: ''  // A-Z
        }
    },
    components: {
        CityHeader,
        Search,
        List,
        Alphabet
    },
    methods:{
        getCityInfo () {
            axios.get('/api/city.json').then(this.getCityInfoSucc)   //请求本地配置的mock数据
        },
        getCityInfoSucc(res){
             res = res.data
            if (res.ret && res.data) {
                const data = res.data
                this.hotCity = data.hotCities
                this.cities = data.cities
            }
        }
    },
    mounted () {
        this.getCityInfo ()
    }
}

 

创建头部组件，

创建搜索组件页面，接受父组件传递的数据，引入better-scroll第三方插件，实现列表滚动

创建城市列表组件，引入better-scroll插件，实现列表滚动，通过watch监听letter，实现字母与城市列表滚动

创建字母组件，点击字母，左边列表城市想对应，通过this.$emit事件，子组件在触发的事件传递给父组件，父组件通过子组件传递的事件，在传递给List组件，

 以上都是所有本次的内容，如果喜欢可以关注一下