城市选择页把左侧的字母列表和页面的字母列表联动

朴灿烈づ我的快乐病毒、 2022-05-24 05:56 212阅读 0赞

在码云上创建分支

city-components

然后拉到本地

git pull

在进行切换到分支 ，在本地分git checkout city-components

npm run dev。

如何实现点击左侧字母，直接定位到列表区域

切换到Alphabet。vue文件。给列表添加click事件

![20180522091254321][]

此时，console出字母，然后把这个字母传递给list。vue页面.这时做一个兄弟组件的传值，通过nus总线的形式。

首先把Alphabet.vue文件的字母传递给City.vue文件，然后在传递给LIst.vue页面。

第一步：在Alphabet.vue里向外触发事件

![20180522091751230][]

在City.vue里接收事件

![20180522091905589][]

然后在定义  这个事件![20180522092002483][]

此时看看控制台，点击字母是否打印

然后把字母从City.vue传递给List.vue

父组件通过属性传递值给子组件，在父组件里，data里定义一个变量 letter，当接收到外部传来的数据时让this。letter=letter

![20180522092440679][]

然后把letter传递给city-list组件

![20180522092628605][]

然后List.vue接收这个变量

![20180522092734988][]

再在用watch函数来监听letter的变化

![20180522092934122][]

better-scoroll提供

![20180522093204351][]

![20180522093339238][]

如何实现拖拽右侧的字母，列表项也跟着变呢，所以要对右侧的字母列表做个滚动监听

首先在alphbet。vue里绑定4个事件

![20180522102452895][]

![20180522102616185][]

现在需要一个数组来存储字母的下标

![20180522102835496][]

这样就构建出了一个letters的计算属性。

这是li标签的循环也要改一下，

![20180522103129855][]

获取字母的下标，向外触发change函数

![20180522103837135][]

获取字母下标的值性能比较低，如何改善呢，因为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里添加

![20180522111442545][]

然后写updated生命周期函数，当页面的数据被更新的时候同时页面完成了渲染之后updated这个钩子就会执行

![20180522111718933][]

在

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

在函数那块，通过节流来提高性能

![20180522112412102][]

如果touchStatus存在就把它clear掉，否则创建一个timer。如果正在获取字母的时候，去延迟16毫秒去执行，在16毫秒之间又进行了手指的滚动，则会把上次的操作给清除掉，重新执行这次的操作。通过函数节流，可以大大提高handletoucch nmmove 这个函数

![20180522112632987][]

然后把项目提交到码云

![20180522113840489][]

git push

[20180522091254321]: /images/20220524/20070446cc414ac591aa1f92af72dfca.png
[20180522091751230]: /images/20220524/49f174f63009468f9af2613658755b5b.png
[20180522091905589]: /images/20220524/7f7a97b094ff4bf884ce35c35a22103a.png
[20180522092002483]: /images/20220524/ccb41c124a994704b2c46a51f35efe83.png
[20180522092440679]: /images/20220524/bb67d05da060441696f047244ff181c3.png
[20180522092628605]: /images/20220524/39e2b01269be4fdba6f17e645aee03b5.png
[20180522092734988]: /images/20220524/5600470a949c48a9b237d82195bcf375.png
[20180522092934122]: /images/20220524/b64fc77d30484365a9f4818705652b0e.png
[20180522093204351]: /images/20220524/5762aeca28fb4665b6effce8f0c3bcad.png
[20180522093339238]: /images/20220524/f04516cfd11649a2b039e57b42a816f0.png
[20180522102452895]: /images/20220524/e6fd1901cf8945da8dc5054ac0ec98d3.png
[20180522102616185]: /images/20220524/43520f8e305c4779b7eb22dc5fbc5555.png
[20180522102835496]: /images/20220524/187b9a910b1f4caca184fcd1c3ebe454.png
[20180522103129855]: /images/20220524/b27f890703534c5690efa49375a2b7a1.png
[20180522103837135]: /images/20220524/83842e91b9504dfd9014556377b7dc83.png
[20180522111442545]: /images/20220524/d93bd0b78c21474f83ffbdb8ce060ebd.png
[20180522111718933]: /images/20220524/ae41e87dbd0b42e0bb551b3bc3697005.png
[20180522112412102]: /images/20220524/4b66a6da65bd4084bf0e43c92b961262.png
[20180522112632987]: /images/20220524/709d85fc1677402daf2bed5864e37130.png
[20180522113840489]: /images/20220524/0a6929726309440a85869e9a9dcb7288.png