uniapp插件-导航栏菜单设计与实现（设计）

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」。

平台兼容性

首先我们看看考虑到的兼容的平台。

Vue2	Vue3
√	×

App	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	快应用
3.1.20 app-vue	√	?	?	?	?	?

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	?	√	√	√

功能说明

大致构思如图所示：
1、选项胶囊需要有滑动切换效果。
2、选项胶囊可自定义颜色、速度等。
3、选项内容区域dom可以通过slot暴露，增加扩展性，并且对宽度不做固定限制。
4、选项内容无数量限制，可设置不定宽或者定宽。 5、事件点击反馈事件

参数使用确定

通过组件传参的方式实现要求
2、选项胶囊可自定义颜色、速度等。

属性名	类型	默认值	说明
option	Array＜Object＞	[{ name: '全部'}]	菜单项目，name为当前显示字段，格式如:[{ name: '全部'}, { name: '选项一' }]
scroll	Boolean	true	是否滑动
sec	Number	0.25	胶囊速度
width	Number	40	胶囊宽
colour	String	rgba(243, 152, 0, 1)	胶囊颜色

事件和插槽确定

事件 @feedback
5、事件点击反馈事件
通过v-slot实现要求三。
3、选项内容区域dom可以通过slot暴露，增加扩展性，并且对宽度不做固定限制。

属性名	类型	默认值	说明
@feedback	[Number, String]	-	当前选中时的事件反馈，返回值为当前下标
v-slot	Object	-	插槽，通过v-slot:="{ item, active }"获取，item为当前项数据，active为是否选中

使用

使用方式考虑两种加载方式：
1、全局引入：遵循uniapp-easycom组件规则，让组件导入既可用。点击查看easycom组件规则
2、局部引入：遵循vue局部引入方式。例:

import duNav from '@/components/du-nav/du-nav.vue'
export default { components: { duNav } }
    <du-nav :option="Array＜Object＞" @feedback="feedback">
                    <template v-slot:="{ item, active }">
                        <text>{{ item.name }}</text>
                    </template>
    </du-nav>
复制代码

示例

好了我们看看实例代码吧！组要分为滑动内容导航和定宽导航

<template>
    <view>
        <view class="consent">
            <view class="common-page-head">可滑动导航（默认）</view>
            <view class="consent-item-1">
                <du-nav :option="list1" @feedback="feedback">
                    <template v-slot:="{ item, active }">
                        <text>{{ item.name }}</text>
                    </template>
                </du-nav>
            </view>
            <view class="common-page-head">固定导航</view>
            <view class="consent-item-2">
                <du-nav :option="list2" :scroll="false" width="66">
                    <template v-slot:="{ item, active }">
                        <text>{{ item.name }}</text>
                    </template>
                </du-nav>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * 插槽参数 active=>false true  可自行判断修改text样式
 */
export default {
    data() {
        return {
            list1: [
                { name: '全部', type: '0' },
                { name: '选项一', type: '1' },
                { name: '选项二', type: '2' },
                { name: '选项三', type: '3' },
                { name: '选项四', type: '4' },
                { name: '选项五', type: '5' },
                { name: '选项六', type: '6' },
                { name: '选项七', type: '7' }
            ],
            list2: [{ name: '全部', type: '0' }, { name: '选项一', type: '1' }, { name: '选项二', type: '2' }, { name: '选项二', type: '3' }]
        };
    },
    methods:{
        /**
         * @param [Number, String] i 当前选中下标
         */
        feedback(i){
            console.log(i)
        }
    }
};
</script>

<style lang="less">
.consent {
    margin-bottom: 12px;
    padding: 15upx;
    .consent-item-1 {
        border: 1upx solid #f4f4f4;
    }
    .consent-item-2 {
        border: 1upx solid #f4f4f4;
        padding: 0 20upx; //可自行调整内边距
    }
}
</style>
复制代码

结尾

细心的朋友可能发现前面说的 1、选项胶囊需要有滑动切换效果。和选项内容无数量限制，可设置不定宽或者定宽还没有说明。
那怎么实现滑动？怎么不定宽实现胶囊的坐标滑动距离？
今天我们将了大致的思路和属性的确定，我们明天就具体说说怎么实现吧。