vue项目学习:14-citylist组件和letter组件之间的联动

首先:因为组件之间要传递的值非常的简单,所以,就直接用传递的方式,从Alphabet传值到City,再由city组件传值到cityList组件。具体代码实现如下:

vue项目学习:14-citylist组件和letter组件之间的联动

传递

vue项目学习:14-citylist组件和letter组件之间的联动

接受再传递

vue项目学习:14-citylist组件和letter组件之间的联动

vue项目学习:14-citylist组件和letter组件之间的联动

vue项目学习:14-citylist组件和letter组件之间的联动

list组件接收

vue项目学习:14-citylist组件和letter组件之间的联动

然后需要实现的是拖动右侧的字母,前面的list也跟着一起滚动,这里实现起来有点复杂。具体思路级代码如下:

vue项目学习:14-citylist组件和letter组件之间的联动

代码实现如下

vue项目学习:14-citylist组件和letter组件之间的联动

vue项目学习:14-citylist组件和letter组件之间的联动

vue项目学习:14-citylist组件和letter组件之间的联动

到这里,逻辑就基本实现了。

这一节学起来让我体会到js的基础很重要。

最后,进行优化

vue项目学习:14-citylist组件和letter组件之间的联动

补充上图理解错了。应该是触发touchmove的时候。事件延迟16毫秒执行。如果在这16毫秒里面又执行了一次,那么。就清除上一次的,执行这一次的。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-09-12
  • 2021-05-18
  • 2021-09-13
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-11-21
  • 2021-08-12
  • 2021-12-02
  • 2022-12-23
  • 2021-09-14
  • 2022-12-23
  • 2022-01-04
相关资源
相似解决方案