不是很好描述这种功能，大概和通讯录一样，按名称分组，右侧有字母列表，可进行选择。
就是这个样子的
（贴图出来比较一目了然）
使用Vue实现，这里需要安装一个插件better-scroll，安装引入流程可进上面链接的github上，按要求完成便可。
script部分这样写
模板部分记得要按照要求来写模板，然后将想要滑动的部分，通过
ref获取dom结构。
静态布局部分要自己好好写，这里就不说啦。
动态数据渲染
我这里写的是城市选择列表，但是功能和通讯录是一样的，首先在城市父组件内引入axios，引入这个是为了发起ajax请求。
我是差不多的操作
然后在mounted这个钩子函数内，发起ajax请求，也可以写在created这个钩子函数内，但是最好写在mounted内。
然后请求函数的具体执行函数写在methods内，handleGetCityInfoSucc是成功接收的回调函数。这里的操作是先把返回结果打印出来。
我是返回结果
接下来去data部分创建两个变量，一个cities 是个对象，一个hotCities是个数组，默认都为空。
然后将返回结果赋值给它们。
我是赋值操作
接下来就是父组件传值给子组件。
父组件通过绑定属性传递给子组件
绑定了两个属性
然后子组件去接收它们
接收它们
通过props接收它们，定义好类型。
写好对应循环
然后找对应的模板进行修改。
红框部分是一个两层循环，为什么是两层循环呢？
返回的cities，内部是一个对象，'A'，'B'，'C'... 这些是它的
key，它们的值是数组形式
第一层循环
数组内部又是若干个对象组成
第二层循环
【PS】对象也可以用
v-for循环，但是它的第二项就不是index了，而是key，这里的key就是A、B、C...
第二层循环是第一层的item的内部循环，所以图中第二层循环写的是innerItem of item， item是第一层循环中的(item, key) of cities。
双层循环的时候，如果父级的key值和子级循环的key一样了，也没有关系，只要父级的key值不重复就行了
这里的key不是指的对象里的key了，指的是v-for循环要有的:key=""
字母索引组件的ABCD...的索引，同样可以用上面的cities数据，也就是第一层循环就能将索引都渲染出来。
渲染字母索引
网友评论