锐客网

  1. 首页 > it技术 > >

svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）

基于Svelte3自定义组件Navbar+Tabbar沉浸式导航条|底部凸起菜单栏
Svelte 一种全新的构建用户界面的框架。当下热门的 Vue 和 React 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。
svelte编写的程序具有 更少的代码量、无虚拟DOM、内置响应式反应能力 等特性。
svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片

◆ 准备
svelte构建的项目，结构简单清晰。在lib目录下新建Headerbar和Tabbar组件。
svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片

在公共模板 __layout.svelte 页面或者需要用到组件的页面引入组件。

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


◆ svelte自定义顶部导航栏
{#if back && back != 'false'}{/if}{#if $$slots.title}{:else} {@html title} {/if}@import url('./headerbar.scss');

和Vue相比，实现相同的功能，Svelte语法更加简洁随意。vue通过props自定义属性字段，而svelte则是export来定义导出字段。
svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片

headerbar.svelte 支持自定义背景(渐变色)、文字颜色、标题居中、搜索框、沉浸式悬浮、是否固定及层叠等功能。
另外还支持自定义插槽丰富组件功能，实现一些城市选择、按钮、圆点提示、图片等功能。

svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片

上海
svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片

另外设置transparent属性，导航条会悬浮在背景或内容之上。可通过控制滚动来动态设置bgcolor属性。

svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片
Svelte svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片

在需要滚动的页面定义一个

$: 后面的函数具有响应式能力。
◆ svelte自定义底部Tabbar组件
{#each tabs as item,i}
{#if item.dock}{/if} {#if item.icon}{/if} {#if item.img}svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片

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

点击选项将返回索引值。

注意：vue向父组件传递事件通过this.$emit()，而svelte则需要定义一个事件触发器createEventDispatcher
import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() dispatch('click', 123)

svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）
文章图片

ok，基于svelte自定义headerbar及tabbar组件的分享就到这里。后续还会分享一些svelte知识。希望对大家有些帮助~??
【svelte组件（Svelte3自定义Navbar+Tabbr组件|svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件）】

    推荐阅读


    上一篇：程序员接私活的7大平台利器(文末有送书)

    下一篇：Linux|【Linux】权限管理详解