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

桃扇骨 2023-06-05 08:25 109阅读 0赞

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

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

要实现的效果：

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

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

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

![1693641-20190811162142142-1512271293.png][]

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

![1693641-20190811162422501-114284622.png][]

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

![1693641-20190811162453415-727622968.png][]

父组件接收到这个事件

![1693641-20190811162721806-122186712.png][]

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

![1693641-20190811162837026-151551068.png][]

在list组件中接收letter

![1693641-20190811163340664-1231478156.png][]

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

![1693641-20190811163710866-1165651917.png][](在循环体内给每个循环添加一个ref属性，方便betterscroll去跳转)

![1693641-20190811163526707-1942386751.png][]

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

![1693641-20190811163947406-23573393.png][]

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

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

![1693641-20190811164040313-1162572621.png][]

![1693641-20190811165048060-648788762.png][]

转载于:https://www.cnblogs.com/rmty/p/11335537.html

[1693641-20190811162142142-1512271293.png]: /images/20230601/3c2d87241867417c932d379b1c9173f1.png
[1693641-20190811162422501-114284622.png]: /images/20230601/f56e94058c074411af438e0cd2250c50.png
[1693641-20190811162453415-727622968.png]: /images/20230601/18c56dd0ec234f86a3073033d05bf82b.png
[1693641-20190811162721806-122186712.png]: /images/20230601/6c144e885967481b82745709918dbfce.png
[1693641-20190811162837026-151551068.png]: /images/20230601/b473db2d96a34548bc4765e53902d306.png
[1693641-20190811163340664-1231478156.png]: /images/20230601/247809f6005c49d5932379b6940bbca2.png
[1693641-20190811163710866-1165651917.png]: /images/20230601/1ce0300f39614e60be00824eeb963e0c.png
[1693641-20190811163526707-1942386751.png]: /images/20230601/6947894ec8844b2695f4d163544f66b7.png
[1693641-20190811163947406-23573393.png]: /images/20230601/79041882ae90483f9ae2bb1046bd154f.png
[1693641-20190811164040313-1162572621.png]: /images/20230601/2c52846a2e264e1cb8a47f68389470f7.png
[1693641-20190811165048060-648788762.png]: /images/20230601/d9988fef2f08455dbe80edb4bf2af4d7.png