svelte自定义组件|导航条Navbar及菜单栏Tabbar

最近一直在学习Svelte知识。目前版本已经到svelte3.x了。
今天给大家分享两个常用的自定义组件Navbar+Tabbar。

svelte官网：https://svelte.dev/

在公共lib目录下新建Headerbar及Tabbar组件。

引入组件

import HeaderBar from '$lib/HeaderBar.svelte';
import TabBar from '$lib/TabBar.svelte';

Svelte自定义导航条Navbar

    

        
        {#if back && back != 'false'}
            

                
            
        {/if}

        
        

            {#if $$slots.title}
                
            {:else}
                {@html title}
            {/if}
        

        
        

            
        

        
        

            
        
    

如上图：导航条支持 自定义背景(渐变色)、文字颜色、标题居中、搜索框、沉浸式悬浮、是否固定及层叠 等功能。
还支持 自定义插槽 丰富组件功能，实现一些地址选择、圆点提示、图片等功能。

通过如下方式快速调用组件。

Svelte自定义菜单栏Tabbar

/**
 * @Desc     Svelte自定义Tabbar组件
 * @Time     andy by 2022/3/12
 * @About    Q：282310962  wx：xy190310
 */



    

        {#each tabs as item,i}
            

                

                    {#if item.dock}{/if}
                    {#if item.icon}{/if}
                    {#if item.img}{/if}
                    {#if item.badge}{@html item.badge}{/if}
                    {#if item.dot}{/if}
                
                
{@html item.title}
            
        {/each}
    

Tabbar.svelte 支持 自定义背景(渐变背景)、文字颜色|选中颜色、是否固定、中间按钮dock凸起 等功能。

需要注意的是，svelte子组件向父组件传递事件需要引入事件触发器。

import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
dispatch('click', 999)

一顿操作下来，发现svelte开发组件确实比vue精简了不少。不过遗憾的是，目前还没有找到全局引入组件的方法。如果大家有一些比较好的方法，欢迎留言交流。