不是很好描述这种功能,大概和通讯录一样,按名称分组,右侧有字母列表,可进行选择。
(贴图出来比较一目了然)
使用Vue
实现,这里需要安装一个插件better-scroll,安装引入流程可进上面链接的github
上,按要求完成便可。
模板部分记得要按照要求来写模板,然后将想要滑动的部分,通过
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
数据,也就是第一层循环就能将索引都渲染出来。