更新记录

1.0.3（2020-08-19） 下载此版本

修复组件在微信小程序下的bug

1.0.2（2020-08-07） 下载此版本

版本v1.0.2 更新文档内容，修复因offsetTop设定引发的bug

1.0.1（2020-07-16） 下载此版本

版本v1.0.1 修复bug，更新文档内容

平台兼容性

版本号

1.0.3

描述

侧边栏导航，类似于美团外卖商品列表页，支持右侧滚动时左侧对应到相应锚点，支持右侧滚动时对应锚点吸顶。

使用方式

<!-- 例子：带banner的时候的设置 -->
<view :style="[styleObj]"></view>
<category-list :height="500" :offsetTop="offsetTop" :defaultActive="defaultActive"  :categoryList="categoryList" @categoryMainClick="categoryMainClick"
 @categorySubClick="categorySubClick"></category-list>

 <!-- 例子：组件占领整个页面的设置 -->
<category-list :defaultActive="defaultActive" :categoryList="categoryList" @categoryMainClick="categoryMainClick"
    @categorySubClick="categorySubClick"></category-list>

参数说明

注意事项

1. 方法$getRect为全局方法，用于查询节点信息，参考了 uView 的 $uGetRect，该方法可定义在入口文件。 getRect 挂载到Vue.prototype上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出。 若项目中已引用uView库，则将该组件里使用的 $getRect 方法替换为 uView 对应方法$uGetRect即可。

// 入口文件 main.js
Vue.prototype.$getRect = function(selector, all) {
    return new Promise(resolve => {
        uni.createSelectorQuery().
        in(this)[all ? 'selectAll' : 'select'](selector)
            .boundingClientRect(rect => {
                if (all && Array.isArray(rect) && rect.length) {
                    resolve(rect)
                }
                if (!all && rect) {
                    resolve(rect)
                }
            })
            .exec()
    })
}

2. offset字段中已做了适配浏览器的处理（顶部增加44px）。

3. 注意在微信小程序中，style的写法不支持vue官方文档，例如上面使用方式中 style 绑定 styleObj。

4. 组件只是给了个框架，里面的样式等均可以根据项目需求自行修改。