Vue2.0 实现滚动视图+头部悬停+侧边索引

前言

之前写过一篇基于better-scroll实现轮播图组件的文章,这篇文章是对better-scroll封装后,实现一个类似于通讯录的UI.效果如下:

需求分析

根据需求,我们可以知道,整个UI大致分为三个模块。
1、头部导航
2、内容滚动区域
3、索引列表区域

代码实现

1、首先我们对better-scroll进行一个简单的封装,方便我们下文的使用

scroll.vue

//提供一个简单的模板


// 对better-scroll简单的封装,封装一些默认的配置 以及分发部分事件

                    
                    

你可能感兴趣的:(Vue.js)