Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化

一,  兄弟组件间联动

1.  点击城市字母,左侧对应显示

给遍历的 字母 添加一个点击事件:

Alphabet.vue

@click="handleLetterClick"
    handleLetterClick (e) {    //获取对应的字母
      this.$emit(‘change‘, e.target.innerHTML)
    }

在 父组件City.vue 中,监听

<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
    handleLetterChange (letter) {
      this.letter = letter
    }

然后转发给子CityList组件:

    <city-list :letter="letter"></city-list>

CityList组件,监听:

添加 ref属性      

<div class="area" v-for="(city,key) in cities" :key="key" :ref="key">
        <div class="title border-topbottom">{{key}}</div>
        <div class="item-list">
          <div class="item border-bottom" v-for="c in city" :key="c.id">{{c.name}}</div>
        </div>
</div>
 props: [‘letter‘],
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]        // better-scrool方法,滚动区自动滚动到元素上
         this.scroll.scrollToElement(element)
      }
    }

2.  拖动城市字母表,左侧城市对应滚动

给Alphabet.vue 字母列表绑定事件:

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

事件说明:

touchstart : 触摸开始(手指放在触摸屏上)

touchmove : 拖动(手指在触摸屏上移动)

touchend : 触摸结束(手指从触摸屏上移开)

当前第几个字母   = (触摸处浏览器页面的垂直坐标  -  A 字母距离搜索栏底部的距离) / 每个字母的高度

  methods: {
      handleTouchStart () {      //滑动开始
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        // A 字母距离搜索栏底部的距离
        const startY = this.$refs[‘A‘][0].offsetTop      // 79 为:顶部搜索栏 的高度
        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])
        }
      }
    },
    handleTouchEnd () {     // 滑动结束
      this.touchStatus = false
    }
  }

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

<script>
export default {
  name: ‘CityAlphabet‘,
  props: [‘cities‘],
  data () {
    return {
      touchStatus: false
    }
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  },
  methods: {
    handleLetterClick (e) {
      this.$emit(‘change‘, e.target.innerHTML)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        // A 字母距离搜索栏底部的距离
        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])
        }
      }
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .list
    position absolute
    right 0
    top 1.58rem
    bottom 0
    display flex
    width .4rem
    flex-direction column
    justify-content center
    .item
      text-align center
      line-height .4rem
      color $bgColor
</style>

Alphabet.vue

二,列表切换性能优化

1.  滚动的优化

滚动重复执行运算:

this.$refs[‘A‘][0].offsetTop

在 data 中定义 变量

  data () {
    return {
      startY: 0
    }
  }
添加生命周期钩子 updated:
  updated () {
    this.startY = this.$refs[‘A‘][0].offsetTop
  }
     handleTouchMove (e) {
      if (this.touchStatus) {
        const touchY = e.touches[0].clientY - 79
        const index = Math.floor(touchY - this.startY) / 20
        if (index >= 0 && index < this.letters.length) {
          this.$emit(‘change‘, this.letters[index])
        }
      }
    }

2. 节流限制 函数   handleTouchMove()  执行的频率

data中  定义   timer: null

  data () {
    return {
      touchStatus: false,
      startY: 0,
      timer: null
    }

函数的改动:

    handleTouchMove (e) {
      if (this.touchStatus) {
        if (this.timer) {
          clearTimeout(this.time)
        }
        this.timer = setTimeout(() => {
          const touchY = e.touches[0].clientY - 79
          const index = Math.floor(touchY - this.startY) / 20
          if (index >= 0 && index < this.letters.length) {
            this.$emit(‘change‘, this.letters[index])
          }
        }, 16)
      }
    }

项目地址https://github.com/1417766861/Vue2.5-App/tree/master/Travel

原文地址:https://www.cnblogs.com/donghaoblogs/p/10438290.html

时间: 2024-11-09 10:29:33

Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化的相关文章

Vue2.5 开发去哪儿网App

Vue2.5开发去哪儿网App 技术栈和主要框架 ?? Vue 全家桶:vue2.5 + vuex + vue-router + webpack ?? ES6 ?? 网络请求:axios 项目运行 # 克隆到本地 git clone https://github.com/1417766861/Vue2.5-App.git # 安装依赖 npm install # 开启本地服务器localhost:8088 npm run dev # 发布环境 npm run build 项目结构: 项目截图 ?

Vue2.5开发去哪儿网App 从零基础入门到实战项目

第1章 课程介绍 本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 第2章 Vue 起步 本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势. 第3章 Vue 基础精讲 本章通过精挑细选的案例,精讲 Vue 中的基础知识,包括实例.生命周期.指令.计算属性.方法.侦听器,表单等部分内容. 第4章 深入理解 Vue 组件 本章将深入讲解 Vue 组件使用的细节点,从父子组件的参数传递及校验入手

Vue2.5开发去哪儿网App

第1章 课程介绍 本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介试看 第2章 Vue 起步 本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势. 2-1 课程学习方法 2-2 hello world 2-3 开发TodoList(v-model.v-for.v-on) 2-4 MVVM模式试看 2-5 前端组件化 2-6 使用组件改造TodoList 2-7 简单的组件间

Vue2.5开发去哪儿网App 首页开发

主页划 5 个组件,即 header  icon  swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --save cnpm install stylus-loader --save 2. 编写样式 <template> <div class="header"> <div class="header-left">返回</div>

项目- Vue全家桶实战去哪网App

最近在学习Vue,花了几天时间跟着做了这个项目,算是对学习Vue入门的一个总结,欢迎同学们star 去哪网APP ?? 项目演示地址:http://118.25.39.84 基于 Vue 全家桶 (2.x) 制作的 去哪网APP项目,项目完整.功能完备.UI美观.交互一流. 点击查看效果 技术栈 [前端] Vue:构建用户界面的 MVVM 框架,核心是响应的数据绑定和组系统件 vue-router:为单页面应用提供的路由系统,项目上线前使用了路由懒加载技术,来异步加载路由优化性能 vuex:Vu

去哪网实习总结:开发定时任务(JavaWeb)

本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发... 不过还是比较认真的做了三个月,老师很认同我的工作态度和成果... 实习马上就要结束了,总结一下几点之前没有注意过的变成习惯和问题,分享给大家. 同时打个广告:去哪网内审部招JavaWeb开发实习生,时间非常自由,每周一天.周六周日甚至都可以,时间充裕的小伙伴给我留言啊,挣个零花钱,还能长点经验....(保研的.想工作的大四狗最合适不过了...) 其实定时任务很简单,js其实也做过,就是Timer类的 Timer.schedule(Ti

【方案】去哪儿网徐磊:如何利用开源技术构建日处理130亿+的实时日志平台?

转自:http://mp.weixin.qq.com/s?__biz=MzIzMzEzODYwOA==&mid=2665284466&idx=1&sn=2b06a529821734e36e26e642424f24fc&scene=2&srcid=0527p3qISp6dFqGg8iLIYgRF&from=timeline&isappinstalled=0#wechat_redirect [本文系互联网技术联盟(ITA1024)原创首发,转载或节选内容

去哪网实习总结:用到的easyui组件总结(JavaWeb)

本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发... 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果.. . 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题,分享给大家. 同一时候打个广告:去哪网内审部招JavaWeb开发实习生,时间很自由.每周一天.周六周日甚至都能够,时间充裕的小伙伴给我留言啊,挣个零花钱,还能长点经验. . ..(保研的.想工作的大四狗最合适只是了. ..) 1)布局Layout.手风琴According.选项卡Tabs.数据表格Dat

iOS游戏开发 软件开发 UNITY3D软件外包 APP定制

iOS游戏开发 软件开发 UNITY3D软件外包 APP定制 软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程.软件开发是一项包括需求捕捉.需求分析.设计.实现和测试的系统工程.软件一般 是用某种程序设计语言来实现的.通常采用软件开发工具可以进行开发.软件分为系统软件和应用软件,并不只是包括可以在计算机上运行的程序,与这些程序相关 的文件一般也被认为是软件的一部分. 软件设计思路和方法的一般过程,包括设计软件的功能和实现的算法和方法.软件的总体结构设计和模块设计.编程和调试.程序联