Vue实现选择城市功能
|
查看完整的代码请到 我的github地址 一、结果展示
二、前期准备：1.引入汉字转拼音的插件，利用NPM安装 代码指令为 2.引入 三、 分析所实现的功能点：1、获取json数据展示城市列表 。 2、侧边字母定位滚动到相应的位置。 3、实现搜索城市 1、实现1的逻辑，主要是引入vue-resource，然后利用其中http的功能去调用json文件，当然api也是同样可以 。 {/* 要进行的数据处理 */}） // '/static/city.json'自己要引入的文件或接口。
渲染列表的时候，将数据组成数组对象的形式，例如这样
这样的话可以一次将字母列表和城市列表一起渲染出来。不过要想把对应的汉字都放到对应的字母后面，我们引入了一个插件，可以用npm直接安装 。 引入汉字转拼音的插件，利用NPM安装 代码指令为 引入之后调用 = 0 && _index < 26) {
letter[_index].citylist.push(cityNamesFilter[i])
}
}
// 如果letter中citylist中没有值的话，过滤这一项
showCity = showCityTemp = letter.filter(function (value) {
let len = value.citylist.length
return len > 0
})
},
从上可看出只用了showCity这个数据进行v-for 。 2、构建完主体以后，其实右侧的字母栏与中间的字母生成方式是一致的，在定位的方面采用的是js中的scrolltop的方法，用锚点的方法也是可以的，有兴趣的可以自己试试。在滚动的同时，中间也加入了字母的显示动画。 这样的话，城市列表的显示和导航基本完成，接下来的重点在于搜索城市。 3、实现搜索城市
原理说起来很简单，就是在列表中去寻找还有输入字符的项，找到了就可以的让他显示出来。 由于vue的便利性，我们不需要去自己进行对dom太多操作，只需要对数据进行操作。 可以看出这一块并没有隐藏第一次渲染出的结构，而是确确实实的没有构建，这都得益于vue对虚拟dom的操作，这里就不细说了。
在实现这个功能的时候，用到了vue中watch，可以用来观察数据的改变，当数据改变的时候，绑定函数。 -1)
})
value.citylist = showCityListTemp
return value.citylist.length > 0
})
this.showCity = showCity
if (showCity.length === 0) {
let _showCityContent = document.getElementById('showCityContent')
_showCityContent.innerText = '查询不到结果'
_showCityContent.setAttribute('class','tipShow')
} else {
document.getElementById('showCityContent').innerText = ''
}
}
到这里，基本的的城市算是做完了。 查看完整的代码请到 我的github地址 以上所述是小编给大家介绍的Vue实现选择城市功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
