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

在码云上创建分支

city-components

然后拉到本地

git pull

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

npm run dev。

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

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

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

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

扫描二维码关注公众号，回复： 2175804 查看本文章

第一步：在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

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

猜你喜欢