Vue开发学习-周报4-城市列表的具体功能完成

本文记录了Vue项目中城市列表的开发进展,包括完成的搜索功能、按住导航栏字母滚动以及点击跳转至主页等。在滚动功能中,通过坐标定位和Math.floor实现字母定位;搜索功能利用v-for和v-show处理页面弹出效果,数据来源于已处理的json,结合Vuex进行数据共享。遇到的问题如导航栏选择异常和搜索不全,通过调整代码得以解决。
摘要由CSDN通过智能技术生成

1.完成情况

  • 列表页面的搜索功能完成
  • 导航栏的按住滚动功能
  • 在城市列表内点击跳到主页显示相关内容

2.重点以及特殊问题记录

1.按住导航栏字母滚动功能
主要采用坐标的形式进行定位,因为导航栏每个字母的位置间隔相同,每个字母都绑定了一个DOM名字,选择DOM就可以知道响应位置,当手指移动到相应位置后跳转到指定位置,
将间隔的距离每20分成一个单位,使用 Math.floor进行分段,即可分成下标的形式,就可以选择对应字母的DOM区域
在这里插入图片描述

    handleTouchMove (e) {
      if (this.touchStatus) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer &#
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值