vue实现城市列表选择
- 2019 年 10 月 6 日
- 筆記
成果展示
最后的成果就是下面所展示的内容，因为gif图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和node安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍
准备工作：
引入axios插件，调用better-scroll第三方插件，本地json文件，可以参考目录中的city.json,有条件的也可以自己去扒
功能分析
1.获取json数据展示城市列表 。
2.侧边字母定位滚动到相应的位置。
3.实现搜索城市
接下来我们开始对组件进行划分：本次案例中，总共划分为五个组件，下面就是组件的划分图
创建city组件，通过父组件获取数据，传递给子组件
<template> <div class="city"> <CityHeader></CityHeader> //头部 <Search :list="cities"></Search> //搜索 <List :hot="hotCity" :letter="letter" :list="cities"></List> //城市列表 <Alphabet @chang="handleLetterChang" :list="cities"></Alphabet> //A-Z </div> </template> <script> import axios from 'axios' import CityHeader from './components/Header' import Search from './components/Search' import List from './components/List' import Alphabet from './components/Alphabet' export default { data () { return { cities:{}, // 城市列表 hotCity:[], //热门城市 letter: '' // A-Z } }, components: { CityHeader, Search, List, Alphabet }, methods:{ getCityInfo () { axios.get('/api/city.json').then(this.getCityInfoSucc) }, getCityInfoSucc(res){ res = res.data if (res.ret && res.data) { const data = res.data this.hotCity = data.hotCities this.cities = data.cities } console.log(this.cities) }, handleLetterChang(letter) { //接受子组件传过来的 // console.log(letter) this.letter = letter } }, mounted () { this.getCityInfo () } } </script> <style scoped lang="stylus"> </style>
把得到的数据分次传递个对应的子组件，这样有利于网站优化，不用频繁的请数据
<template> <div class="city"> <CityHeader></CityHeader> <Search :list="cities"></Search> <List :hot="hotCity" :letter="letter" :list="cities"></List> <Alphabet @chang="handleLetterChang" :list="cities"></Alphabet> </div> </template> 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 () } }
创建头部组件，
<template> <div class="header"> 城市选择 <router-link to="/"> <div class="iconfont back-icon"></div> </router-link> </div> </template> <script> export default { } </script> <style scoped lang="stylus"> @import '~styles/varibles.styl'; @import '~styles/mixins.styl'; .header overflow: hidden height $headerHeight line-height: $headerHeight text-align: center color: #fff background: $bgColor font-size: .4rem .back-icon position: absolute left: 0 top: 0 width: .64rem font-size: .4rem text-align: center color: #fff </style>
创建搜索组件页面，接受父组件传递的数据，引入better-scroll第三方插件，实现列表滚动
<template> <div> <div class="search"> <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或者拼音" /> </div> <div class="search-content" ref="search" v-show="keyword"> <ul> <li class="serach-item border-bottom" v-for="item in listItem" :key="item.id">{{item.name}}</li> <li v-show="hasNoData" class="serach-item border-bottom">没有搜索到匹配的数据</li> </ul> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { props: { list: Object, }, data() { return { keyword:'', listItem:[], timer:null } }, computed: { hasNoData() { return !this.listItem.length //没有搜索的条件是否显示 } }, watch: { keyword () { if (this.timer) { clearTimeout(this.timer) } if(!this.keyword) { //清空 this.listItem = "" return } this.timer = setTimeout(() => { const result = [] for (let i in this.list) { this.list[i].forEach((value) => { //匹配搜索的条件 if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) { result.push(value) } }) } this.listItem= result },100) } }, mounted () { this.scroll = new BScroll(this.$refs.search) } } </script> <style scoped lang="stylus"> @import '~styles/varibles.styl' @import '~styles/mixins.styl' .search height: .72rem padding: 0 .1rem background:$bgColor .search-input box-sizing: border-box width:100% height: .62rem line-height: .62rem text-align: center border-radius: .06rem padding: 0 .1rem color: #666 .search-content z-index: 1 overflow:hidden position:absolute top: 1.58rem left: 0 right: 0 bottom: 0 background: #eee .serach-item line-height: .62rem padding-left:.2rem color:#666 background: #fff </style>
创建城市列表组件，引入better-scroll插件，实现列表滚动，通过watch监听letter，实现字母与城市列表滚动
<template> <div class="list" ref="wrapper"> <div> <div class="area"> <div class="title border-topbottom">当前城市</div> <div class="button-list"> <div class="button-wrapper"> <div class="button">郑州</div> </div> </div> </div> <div class="area"> <div class="title border-topbottom">热门城市</div> <div class="button-list"> <div class="button-wrapper" v-for="item in hot" :key="item.id"> <div class="button">{{item.name}}</div> </div> </div> </div> <div class="area" v-for="(item,key) in list" :ref="key" :key="key"> <div class="title border-topbottom">{{key}}</div> <ul class="item-list"> <li class="item border-bottom" v-for="listInner in item" :key="listInner.id" >{{listInner.name}}</li> </ul> </div> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { props: { hot: Array, list: Object, letter:String }, mounted () { this.scroll = new BScroll(this.$refs.wrapper) }, watch:{ letter () { //监听列表滚动事件 A-Z if(this.letter) { const element = this.$refs[this.letter][0] this.scroll.scrollToElement(element) } } } } </script> <style scoped lang="stylus"> @import '~styles/varibles.styl'; @import '~styles/mixins.styl'; .border-topbottom &:before background: #ccc &:after background:#ccc .border-bottom &:before background: #ccc .list overflow: hidden position:absolute top:1.58rem left:0 right:0 bottom:0 .title line-height: .54rem; background: #eee; padding-left: .2rem; color: #666; font-size: .26rem; .button-list overflow:hidden padding: .1rem .6rem .1rem .1rem .button-wrapper float:left width:33.33% .button margin: .1rem padding: .1rem 0 text-align: center border: .02rem solid #ccc border-radius: .06rem .item-list .item line-height: .76rem color:#212121 padding-left: .2rem font-size: .28rem text-overflow: ellipsis white-space: nowrap </style>
创建字母组件，点击字母，左边列表城市想对应，通过this.$emit事件，子组件在触发的事件传递给父组件，父组件通过子组件传递的事件，在传递给List组件，
<template> <div class="list"> <li class="item" :ref="item" @click="handeClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend= "handleTouchEnd" v-for="item of letter" :key="item">{{item}}</li> </div> </template> <script> export default { props: { list: Object }, data () { return { touchstart:false, startY:0, timer: null } }, updated () { this.startY = this.$refs['A'][0].offsetTop }, computed: { letter () { const letter =[] for (let i in this.list) { //循环A-Z letter.push(i) } return letter } }, methods: { handeClick(e) { this.$emit('chang',e.target.innerText) //传给父组件City }, handleTouchStart () { // 手指放上 this.touchstart = true }, handleTouchMove (e) { // 手指移动 if(this.touchstart) { if(this.timer) { clearInterval(this.timer) } this.timer = setTimeout(() => { const touchY = e.touches[0].clientY -79 //到蓝色头部的距离 const index = Math.floor((touchY - this.startY ) / 20) if(index >=0 && index < this.letter.length) { this.$emit('chang',this.letter[index]) } },16) } }, handleTouchEnd () { // 手指离开 this.touchstart = false } } } </script> <style scoped lang="stylus"> @import '~styles/varibles.styl'; @import '~styles/mixins.styl'; .list display: flex flex-direction:column justify-content: center position:absolute top: 1.58rem right: 0 bottom: 0 width: .4rem .item line-height:.44rem text-align: center color: $bgColor list-style:none </style>
以上都是所有本次的内容，如果喜欢可以关注一下
