Vue使用better-scroll----城市组件实现字母联动选择

https://www.cnblogs.com/rmty/p/11040799.html

在之前通过Better-scroll实现了城市选择页面最基本的功能,接下来把这个页面字母表联动的过程记录一下:

要实现的效果:

1.点击右侧字母表,页面移动到对应城市字母开头的地方

2.手指在右侧字母表上滑动,页面也会在对应城市字母开头的地方滑动

页面列表和页面字母表是两个在City.vue中的兄弟组件,当点击CityAlphabet组件中的字母时,需要把点击到的字母传递到父组件,再由父组件发送给子组件,这样就实现了基本的兄弟组件传值

首先在CityAlphabet组件中给循环出来的每个字母添加一个点击事件

在methods中定义这个事件,把获取到内容发送到父组件

父组件接收到这个事件

父组件添加这个handleLetterChange方法,传递给list子组件

 

在list组件中接收letter

接下来使用watch监听器,监听每次点击传递过来letter的变化,再使用better-scroll的一个接口滚动到相应区域

(在循环体内给每个循环添加一个ref属性,方便betterscroll去跳转)

 到这里基本点击跳转的功能基本实现了

最后要实现右侧字母表滚动的监听:

在字母表组件中添加触摸开始,触摸移动,触摸结束事件

原文地址:https://www.cnblogs.com/rmty/p/11335537.html