更新记录

2.0(2020-04-06)

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

1.0(2020-03-20)

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


平台兼容性

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

支持app、H5、小程序

简介

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

提示

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

组件属性

属性名 类型 必填 默认值 说明
top-distance Number 0 滚动区域相对于顶部得到距离(单位px)

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

隐私、权限声明

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

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

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

许可协议

MIT协议

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