第十四课时根据字母表点击实现滚动

原理简介

better-scroll 有一个scroll to element 方法
字母通过 ref 作为一个元素，然后直接滚动到这个元素
点击字母时获取字母，进行滚动

点击字母列表时获取字母

Alphabet.vue增加字母点击事件

<template>
	<ul class="list">
	  <li class="item"
	  
		  <!-- 界面增加点击事件handleLetterClick -->
		  @click="handleLetterClick"
		  
		 v-for="(item,key) of letters">{
   {
   item}}</li>
	</ul>
</template>

获取点击字母的值：

//获取点击字母的值
		....
},
methods:{
   
  handleLetterClick(e){
   
	console.log(e.target.innerText)
	
  }
}

注：e.target.innerText注意语法

Alphabet 如何传递到 兄弟节点 的 list

Alphabet传递给父组件phoneBook，再由父组件传给list。

Alphabet传递给父组件phoneBook

父组件定义一个有参的方法handleLetterChange。子组件Alphabet，通过调用这个父组件的方法将字母作父组件方法的参数传递过去。
phoneBook.vue:

<template>