vue实现城市列表选择功能


Posted in Javascript onJuly 16, 2018

成果展示

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

vue实现城市列表选择功能vue实现城市列表选择功能vue实现城市列表选择功能

准备工作:

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

功能分析

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

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

3.实现搜索城市

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

vue实现城市列表选择功能

创建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>

vue实现城市列表选择功能

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

<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>

总结

以上所述是小编给大家介绍的vue实现城市列表选择功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
JS的深浅复制详细
Oct 16 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 #Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 #Javascript
JS在if中的强制类型转换方式
Jul 15 #Javascript
微信小程序form表单组件示例代码
Jul 15 #Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 #Javascript
Bootstrap Table中的多选框删除功能
Jul 15 #Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 #Javascript
You might like
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
Angular2中监听数据更新的方法
2018/08/31 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
单位实习鉴定评语
2015/01/04 职场文书
辞职信范文大全
2015/03/02 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
vue递归实现树形组件
2022/07/15 Vue.js