在码云上创建分支
city-components
然后拉到本地
git pull
在进行切换到分支 ,在本地分git checkout city-components
npm run dev。
如何实现点击左侧字母,直接定位到列表区域
切换到Alphabet。vue文件。给列表添加click事件
此时,console出字母,然后把这个字母传递给list。vue页面.这时做一个兄弟组件的传值,通过nus总线的形式。
首先把Alphabet.vue文件的字母传递给City.vue文件,然后在传递给LIst.vue页面。
第一步:在Alphabet.vue里向外触发事件
在City.vue里接收事件
然后在定义 这个事件
此时看看控制台,点击字母是否打印
然后把字母从City.vue传递给List.vue
父组件通过属性传递值给子组件,在父组件里,data里定义一个变量 letter,当接收到外部传来的数据时让this。letter=letter
然后把letter传递给city-list组件
然后List.vue接收这个变量
再在用watch函数来监听letter的变化
better-scoroll提供
如何实现拖拽右侧的字母,列表项也跟着变呢,所以要对右侧的字母列表做个滚动监听
首先在alphbet。vue里绑定4个事件
现在需要一个数组来存储字母的下标
这样就构建出了一个letters的计算属性。
这是li标签的循环也要改一下,
获取字母的下标,向外触发change函数
获取字母下标的值性能比较低,如何改善呢,因为offsetTop的值是固定的,但是每次执行touchmove 的时候都要重新和计算一下
handletouchmove ( e ) { if(this.touchStatus){ const startY = this.$refs['A'][0].offsetTop const touchY = e.touches[0].clientY-79 const index = Math.floor((touchY-startY)/20) if (index >=0 && index <this.letters.length){ this.$emit('change',this.letters[index]) } console.log(startY) } },
首先在alphabet。vue里添加
然后写updated生命周期函数,当页面的数据被更新的时候同时页面完成了渲染之后updated这个钩子就会执行
在
handletouchmove 函数里,哪行代码就不需要了。
没改之前的代码
<template> <ul class="list"> <li class="item" v-for="item in letters " :ref="item" :key="item" @click="handleLetterClick" @touchstart="handleTouchstaStart" @touchmove="handletouchmove" @touchend="handletouchend" >{{item}}</li> <!--<li class="item">A</li>--> <!--<li class="item">A</li>--> <!--<li class="item">A</li>--> <!--<li class="item">A</li>--> <!--<li class="item">A</li>--> <!--<li class="item">A</li>--> <!--<li class="item">A</li>--> </ul> </template> <script> export default { name: "CityAlphabet", props:{ cities:Object }, computed:{ letters (){ const letters = [] for(let i in this.cities){ letters.push(i) } return letters } }, data(){ return { touchStatus:false } }, methods:{ handleLetterClick (e) { // console.log(e.target.innerHTML) this.$emit('change',e.target.innerHTML) }, handleTouchstaStart () { this.touchStatus=true }, handletouchmove ( e ) { if(this.touchStatus){ const startY = this.$refs['A'][0].offsetTop const touchY = e.touches[0].clientY-79 const index = Math.floor((touchY-startY)/20) if (index >=0 && index <this.letters.length){ this.$emit('change',this.letters[index]) } console.log(startY) } }, handletouchend(){ this.touchStatus = false } } } </script> <style lang="stylus" scoped> @import '~styles/varibles.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 </style>
进行修改,同时把startY改成this.startY
在函数那块,通过节流来提高性能
如果touchStatus存在就把它clear掉,否则创建一个timer。如果正在获取字母的时候,去延迟16毫秒去执行,在16毫秒之间又进行了手指的滚动,则会把上次的操作给清除掉,重新执行这次的操作。通过函数节流,可以大大提高handletoucch nmmove 这个函数
然后把项目提交到码云
git push