组件功能:

  • 可选的顶吸定义:启用后到达距离指定位置时自动固定位置实现顶吸效果
  • 可选的顶吸距离定义:设置组件距离窗口顶部距离多少时启用顶吸效果
  • 可选的组件标签属性定义:位置颜色、大小;下划线颜色、高、宽;点击栏位时文字颜色
  • 组件默认效果:默认属性;默认点击导航栏位时文字放大1.1倍效果
  • 交互方法:组件栏位点击后触发clickitem方法,传递给父组件点击的组件栏位索引位内容;可用于父组件操作业务数据展示

    说明:

    组件使用 HBuilderX 并基于uniapp组件scroll-view开发

组件属性:

属性 值类型 值示例 默认值 备注
bgcolor String: hex颜色值 #ffffff #ffffff 导航栏底色
topfixed Boolean:true or false true false 默认false 关闭顶吸;此属性需要与topfixedval配合使用
topfixedval String:'0px' '0' '0' 设置距离顶部距离时顶吸 此属性需要与topfixed配合使用
fontsize String:'15px' '13px' '13px' 导航栏文字大小
textcolor String:hex颜色值 #999999 #999999 导航栏文字颜色
activetextcolor String:hex颜色值 #000000 #000000 活动的导航栏文字颜色
underlinecolor String:hex颜色值 #6495ED #6495ED 下滑线颜色
underlineheight String:'10px' '10rpx' '10rpx' 下滑线高度 可百分比
underlinewidth String:'10px' '10rpx' '35%' 下滑线高度 可百分比
clickitem 事件: 点击导航栏时触发;传递参数为当前活动的导航栏索引位 index和栏位文本内容value;其中value值可用作刷新展示数据的key 父组件接收事件处理:clickitem(idx,val){ uni.showToast({ title: '点击了:' + val }) }

使用步骤:

1、在vue页面内引入组件(组件放在项目目录下的components目录下),位置<script>

注意:上传的压缩文件内组件名前有加前缀 请自行修改

import glanceSlideNavTabBar from '@/components/glanceSlideNavTabBar.vue';

2、组件引用;位置<export default>

components: { glanceSlideNavTabBar},

3、在模板中需要使用组件的位置,添加组件;位置<template>

<!-- glance 滑动导航栏组件 -->
<glanceSlideNavTabBar 
    topfixedval='0px' 
    :topfixed=true 
    @clickitem="clickitem" 
    :data = "[{textcontent:'爆款爆款'},
            {textcontent:'包邮'},
            {textcontent:'3折'},
            {textcontent:'2人团'}]">
</glanceSlideNavTabBar>

4、与父组件间的通信: 组件主要完成把在点击栏位时传递导航栏位的索引值(业务中可能代表一个筛选字段)给父组件,父组件中定义方法刷新展示数据;伪代码:

clickitem(idx,val){
    //
    <!-- 这里处理刷新导航的内容 -->
    //
    uni.showToast({
        title: '点击了:' + val //val 指点击的导航栏位值
            })
    }

特别说明

对于size\height\width 属性的定义使用 pxrpx

本人水平有限 努力提升中... :blush:

如有问题,请留言;代码有了,想要的效果可以改到自己满意的为止~

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

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

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

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