更新记录

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>

参数说明

属性名 说明 类型 默认值 备注
height 当前列表的高度 Number 屏幕高度 单位:px
sticky 是否开启锚点自动吸顶 Boolean true
offsetTop 锚点自动吸顶时与顶部的距离 Number 0 单位:px
defaultActive 默认选中的index值 Number 0
zIndex 锚点吸顶时的层级 Number 965
categoryList 列表 Array [] 结构为[{name: 'xx', subCategoryList: []}]
label 内容列表中label对应的key名字 String 'name'
activeTextColor 左侧选中时文字颜色 String '#2979ff'
activeBackgroundColor 左侧选中时文字背景色 String '#eeeeee'
categoryMainClick 选中左侧索引时触发 Function
categorySubClick 选中右侧内容项时触发 Function

注意事项

  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()
    })
}
  1. offset字段中已做了适配浏览器的处理(顶部增加44px)。

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

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问