vue兄弟组件数据传递

最新推荐文章于 2023-03-23 16:45:15 发布

stack君

最新推荐文章于 2023-03-23 16:45:15 发布

阅读量122

点赞数

分类专栏： APP开发文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_54362381/article/details/120153340

版权

APP开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在 Vue.js 应用中实现字母模块的滚动监听，通过添加 touchstart, touchmove 和 touchend 事件监听器来处理手指滑动时的字母定位。内容包括计算属性 `letters` 的构建，触控状态的数据绑定，以及在不同触控阶段的方法调用，如计算当前手指相对于目标字母的位置并触发相应事件。

摘要由CSDN通过智能技术生成

Alphabel.vue字母模块滚动的监听

#添加3个touch事件绑定,因为把cities的值push到letters里了,所以原来循环的cities就变为letters, key值变为item值

<ul class="list">
    <li class="item"
        v-for="item of letters"
        :key="item"
        :ref="item"
        @click="handleLetterClick"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd">
        {{item}}
    </li>
</ul>

#因为cities是个对象,而根据下标找到对应的字母,需要数组存储字母列表,在计算属性computed里定义这个数组

    computed:{
        //构造出letters计算属性,把cities的值push到letters里返回一个数组[‘A’,'B'...]
        letters(){
            const letters = []
            for (let i in this.cities){
                letters.push(i)
            }
            return letters
        }
    },

#在touchstart之后才可以触发move事件

data(){
    return{
        //所以定义一个标识位touchStatus
        touchStatus:false
    }
},

#methods里添加3个touch方法

//当手指触摸的时候
handleTouchStart() {
    this.touchStatus = true
},
//当手指滑动的时候
handleTouchMove(e){
    if(this.touchStatus){
        //找到A元素加[0]才是指DOM元素,通过offsetTop获取它距搜索边框底部的高度
        const styrtY = this.$refs['A'][0].offsetTop
       
         //事件对象里touches数组第0项表示手指的一些信息,clientY代表手指距离顶部的高度,再减去顶部和搜索的高度79 = 手指距离距搜索边框底部的高度
        const touchY = e.touches[0].clientY - 79
        
        //touchY-styrtY算出当前手指的手指距离字母A的高度/字母的高度20 = 向下取整(字母所排的顺序) = index(当前字母的下标)
        const index = Math.floor((touchY -styrtY)/20)
        //取到字母change一个事件给外部
        if(index >= 0 && index < this.letters.length){
            this.$emit('change',this.letters[index])
        }        
    }
},
//当结束滑动
handleTouchEnd(){
    this.touchStatus = false
}