平台兼容性

特别说明

组件在微信小程序开发工具、ios微信小程序编译预览均显示正常。其他使用环境未作测试支持。

组件名称：

glance 顶吸滑动导航组件

glance-SlideNavTabBar

组件功能：

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

  说明：

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

版本

组件属性：

使用步骤：

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

import glanceSlideNavTabBar from '@/components/glance-SlideNavTabBar.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 指点击的导航栏位值
            })
    }

使用代码示例

<template>
    <view>
        <!-- 模板中使用组件 -->
        <glanceSlideNavTabBar fontsize="14px" topfixedval="0px" :topfixed=true 
        @clickitem="clickitem"
        :data = "[{textcontent:'爆款爆款'},{textcontent:'包邮'},{textcontent:'3折'},{textcontent:'2人团'},
                    {textcontent:'2人团'},{textcontent:'2人团'},{textcontent:'包邮'},{textcontent:'3折'},
                    {textcontent:'2人团'}]">
        </glanceSlideNavTabBar>
    </view>
</template>

<script>
    // 导入组件文件
import glanceSlideNavTabBar from '@/components/glance-SlideNavTabBar.vue';

export default {
    // 注入组件
    components: { glanceSlideNavTabBar},
    data() {
        return {
            };
    },
    methods: {
        // 实现点击事件
        clickitem(idx,val){
            uni.showToast({
                title: '点击了:' + val
            })
        }
    }
};
</script>

特别说明

对于size\height\width 属性的定义使用 px 或 rpx

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

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