HTML+CSS+JS(+Vue)写一个通讯录组件

求各位大大的Star(*/ω\*)。

没有录屏,所以上传的是图片。后面已补充录屏效果。

效果:(主要是参考小米Note3的通讯录的效果做的)

主要功能:

1. 滚动后,通讯录的模块标题会固定在顶部(图2)

2. 下一个标题很接近时,将上一个标题推上去的效果(过程:图3、图4、图5)

 

实现:

1. 模块标题会固定在顶部:这个实现比较简单,监听滚动的距离,如果大于0(相对的0)就显示固定的标题。

2. 推上去的效果:实际上是修改固定的标题的top值,导致的视觉错觉。当下一个标题距离顶部的距离超出可视区域,将标题又定位在顶部。

 

另外需要注意的地方:

1. 固定的标题一开始就需要展示,只是top比较大/小,不在可视区域内。

2. 在页面中使用时,页面的内容(除了组件),需要给一个z-index和背景色,否则推上去的效果会盖住页面的内容/盖不住。

3. (建议)JS代码里的高度值等,都是通过获取的方式,而不是写固定值的方式。样式可配置。

4. 增加了在slot传入标题、标题是否固定在顶部功能。

 

这个组件可以单独拿来当页面用,也可以当组件用~

 

上传了三个版本:(另增加了两个版本)

三者之间的区别:

  1. 版本1的容器是固定高度的。
    版本2、版本3的容器不定高。
  2. 版本2可以将标题传入slot,另外还有固定标题/不固定标题的选项。 (不支持组件外的标题)
    版本1的标题写在组件外。
    版本3二者都可以实现,PS 组件外的标题不能被固定。
  3. 版本1有下一个标题把上一个标题往上推的效果。
    版本2只有在固定标题的时候有这个效果,不固定标题的时候(fixedTitle为false时)没有往上推的效果。
    版本3有下一个标题把上一个标题盖住的效果。
  4. 版本3已将css改成可配置。

 

补充录屏效果:

版本1例子预览:

版本2例子预览:

版本3例子预览:

1. 内标题固定

2. 内标题不固定

 

具体代码在这里:https://github.com/littleHiuman/littleHiuman.github.io/tree/master/16-addressList

https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~

posted @ 2019-03-27 17:47  hiuman  阅读(453)  评论(2编辑  收藏  举报