更新记录

2.0（2020-04-06） 下载此版本

1. 新增组件属性，解决滚动区域（即该组件）相对于顶部距离不为0时计算联动索引的偏差
2. 优化组件初始化方式

1.0（2020-03-20） 下载此版本

发布导航列表双向联动组件1.0

平台兼容性

导航与列表双向联动组件及模板

支持app、H5、小程序

简介

• 支持导航栏超出滚动
• 列表内容滚动联动导航栏列表索引
• 导航点击定位对应列表内容

提示

• 组件的开发用到stylus，提前安装好stylus编译插件
• 组件模板可根据原型或业务需求进行字段和部分样式的修改
• 关键逻辑部分进行了注释

组件属性

top-distance属性说明

• 解决滚动区域（即该组件）相对于顶部距离不为0时，计算联动索引的偏差

使用示例

<template>
    <view>
        <easy-scroll></easy-scroll>
    </view>
</template>

<script>
import easyScroll from '@/components/easy-scroll/easy-scroll.vue'
export default {
    components:{ easyScroll }
}
</script>

提示

• H5上去掉滚动条方法(不过只能在app.vue写才生效)
• 调试场景是触摸滚动而不是鼠标滚轮滚动

<style>
    ::-webkit-scrollbar {
        display: none;  
        width: 0 !important;  
        height: 0 !important;  
        -webkit-appearance: none;  
        background: transparent;  
    }
</style>

demo预览

https://jianjroh.gitee.io/uniapp_plug_in_development/#/pages/easy-scroll/easy-scroll