@touchstart，@touchmove， @touchend这三个函数不好使呀这是什么原因呀

Question

Property or method “onHandleTouchStart” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
属性或方法“onhandletouchstart”未在实例上定义，但在呈现期间被引用。通过初始化该属性，确保该属性是被动的，无论是在数据选项中，还是对于基于类的组件

52期-未来 10:05:38

老师这个vue.js 中定义的@touchstart，@touchmove， @touchend这三个函数不好使呀这是什么原因呀

Answer 1

提问者 慕用5099044 2019-10-30 10:22:28

<template>

  <div>

    <ul class='list'>

      <li

        class="item"

        v-for="item of letters"

        :key="item"

        :ref="item"

        @touchstart="onHandleTouchStart"

        @touchmove="onHandleTouchMove"

        @touchend="onHandleTouchEnd"

        @click="onHandleClick"

      >

      {{item}}

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  name: 'CityAlphabet',

  props: {

    cities: Object

  },

  computed: {

    letters () {

      /*  ['A','B'...'z']  */

      const letters = []

      for (let i in this.cities) {

        letters.push(i)

      }

      return letters

    }

  },

  data () {

    return {

      touchStatus: false

    }

  },

  methods: {

    onHandleClick (e) {

      this.$emit('change', e.target.innerText)

    },

    onHandleTouchStart () {

      debugger

      this.touchStatus = true

    },

    onHandleTouchMove (e) {

      debugger

      if (this.touchStatus) {

        const startY = this.$refs['A'][0].offsetTop

        console.log(startY)

        /* const touchY = e.touch[0].clientY - 79

        const index = Math.floor((touchY - startY) / 20) */

      }

    },

    onHandleTouchEnd () {

      debugger

      this.touchStatus = false

    }

  }

}

</script>

<style 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: .4rem

        text-align: center

        color: $bgColor

</style>

这个是我的代码

Answer 2

提问者 慕用5099044 2019-10-30 10:17:45

dell 老师你什么时间讲解新版vue呀

• Dell #1

  肯定好使，你是不是没有给bscroll 加click： true 的参数啊，明年重新讲vue

• 努力的小猪猪 回复 Dell #2

  老师我开了模拟器代码应该也没有问题@touchmove但是没有反应

• Dell 回复 努力的小猪猪 #3

  onHandleTouchMove这些方法你定义了吗

点开查看后面2条评论