1.字母组件给父组件传递当前点击的字母值

@click="handleLetterClick"     //绑定事件

handleLetterClick (e) {             //向上传递参数
this.$emit('change',e.target.innerText)
},

2.父组件接收字母组件传递的值

<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>

//先定义一个空的接收
data () {
return {
letter:''
}
},
//将接收的值传给letter
handleLetterChange (letter){
this.letter = letter;
} //传给对应的城市组件
<city-list :letter="letter"></city-list> //这里需要better-scroll插件
import Bscroll from 'better-scroll' //绑定需要插件的地方
mounted () {
this.scroll = new Bscroll(this.$refs.wrapper);
}, //城市组件监听letter的变化,实现跳转
watch:{
letter() {
if(this.letter){
const element=this.$refs[this.letter][0];
this.scroll.scrollToElement(element);
}
}
}

3.实现滑动跳转城市

//绑定滑动事件
<li v-for="item of letters" :key="item" :ref="item"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@click="handleLetterClick"
>{{item}}</li>
//用计算属性来存储(cities)letters
computed:{
letters(){
const letters=[];
for(let i in this.cities){
letters.push(i);
}
return letters;
}
}, 
//data
data (){
return {
touchStatus:false,
startY:0,
timer:null
}
},

 

//为了让性能提高,startY,就计算一次
updated(){
//A元素对应顶部的高度
this.startY=this.$refs['A'][0].offsetTop;
},

  

    handleTouchStart(){
this.touchStatus=true;
},
handleTouchMove(e){
if(this.touchStatus){
// 函数节流
if(this.timer){
clearTimeout(this.timer)
}
this.timer=setTimeout(() => {
// 当前手指到最顶部的高度-头部高度
const touchY = e.touches[0].clientY - 79;
//(touchY - startY)手指到A顶部的高度/20(每个字母的高度)=当前第几个字母
const index = Math.floor((touchY - this.startY) / 20);
if(index >= 0 && index < this.letters.length){
this.$emit('change',this.letters[index]);
}
},16);
}
},
handleTouchEnd(){
this.touchStatus=false;
}

  

 

vue实现点击、滑动右侧字母对应各个城市的更多相关文章

  1. 自己定义View----点击滑动选择字母列表

    因为项目须要,也不想使用网上的写好的控件,于是作死的自己定义了一个控件.特此记录下成功.效果例如以下: 首先须要把全部的字母绘制出来: private static String letters[] ...

  2. day 86 Vue学习之八geetest滑动验证

    Vue学习之八geetest滑动验证   本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...

  3. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  4. vue验证码点击更新

    vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src=&qu ...

  5. vue实现点击图标,图标在2s中完成旋转

    <!-- 点击 vue实现点击图标,图标在2s中完成旋转 1==>如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态 transit ...

  6. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

  7. Vue 仿B站滑动导航

    仿照B站制作的滑动导航功能,进行了部分优化,例如可定制默认选中元素,并将选中元素居中显示,可动态更改数据,可定制回调函数取的下标和选中元素内容,可根据需求制作N级联动 已开发成插件,使用方法与源码请前 ...

  8. day 88 Vue学习之八geetest滑动验证

      本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web中使用 下载gt文件,官网地址,下面我 ...

  9. VUE中使用geetest滑动验证码

    一,准备工作:服务端部署 下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk 需要说明的是这里的gt.js文件,它用于加载对应的验证JS库. 1. ...

随机推荐

  1. TypeScript 之 泛型

    https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Generics.html 泛型:可以支持多种类型的数据 泛型函数的 ...

  2. Day 03 基本数据类型

    一.基本数据类型的使用 1.为何区分数据类型? 答:数据类型指的是变量值的类型,变量值之所以区分类型,是因为变量值用来记录事物状态的,而事物的状态有不同的种类,对应着也必须使用不同类型的值去记录. 整 ...

  3. NET设计模式 第二部分 结构性模式(10):组合模式(Composite Pattern)

    组合模式(Composite Pattern) ——.NET设计模式系列之十一 Terrylee,2006年3月 概述 组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复 ...

  4. NET设计模式 第二部分 结构性模式(8):桥接模式(Bridge Pattern)

    桥接模式(Bridge Pattern) ——.NET设计模式系列之九 Terrylee,2006年2月 概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维 ...

  5. 多层级sql查询

    SELECT ( SELECT ) FROM t_app_user WHERE parent_user_id = t.user_id /*多层级,t.user_id */ ) AS directCou ...

  6. Hyperledger fabric 1.3版本的安装部署(原创多机多Orderer部署

    首先,我们在安装前,要考虑一个问题 Hyperledger Fabric,通过指定的节点进行背书授权,才能完成交易的存储 延伸开来,就是为了实现容错.高并发.易扩展,需要zookeeper来选择排序引 ...

  7. 数据仓库专题(2)-Kimball维度建模四步骤

    一.前言 四步过程维度建模由Kimball提出,可以做为业务梳理.数据梳理后进行多维数据模型设计的指导流程,但是不能作为数据仓库系统建设的指导流程.本文就相关流程及核心问题进行解读. 二.数据仓库建设 ...

  8. HBase与Zookeeper数据结构查询

    一.前言 最近一年了吧,总是忙于特定项目的业务分析和顶层设计,很少花时间和精力放到具体的技术细节,感觉除了架构理念和分析能力的提升,在具体技术层次却并没有多大的进步.因为一些原因,总被人问及一些技术细 ...

  9. 检索COML类工厂中 CLSID为 {00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下错误: 80070005" 《终结篇》

    可以看到报出的异常类型为:UnauthorizedAccessException,没有权限访问,表明我们需要配置执行操作账户的COM访问权限. 由于系统是Windows Server 2008 64位 ...

  10. elasticsearch mapping demo

    curl -XPUT localhost:9200/local -d '{ "settings" : { "analysis" : { "analyz ...