万能导航网(想要导航提示页里的4个网站)

最近一直在学习Nuxt开发,由于 Nuxt.js 是基于 Vue.js 的服务端渲染应用框架,只要你熟悉vue,基本能很快上手了。

万能导航网(想要导航提示页里的4个网站)

Nuxt.js 基于 Vue.js 的通用应用框架,star高达29.6K+。弥补了Vue不利于SEO的缺陷。

万能导航网(想要导航提示页里的4个网站)

# 文档地址https://zh.nuxtjs.org/# 仓库地址https://github.com/nuxt/nuxt.js

通过如下几步即可快速构建nuxt项目。

# 创建项目$ npx create-nuxt-app <project-name># 本地运行npm run dev# 构建npm run build

万能导航网(想要导航提示页里的4个网站)

Nuxt目录结构

下面就直接进入今天的主题,Nuxt.js中创建自定义顶部导航栏和底部tabbar。

万能导航网(想要导航提示页里的4个网站)

首先,在components目录下新建 headerBar.vuetabbar.vue 页面。

万能导航网(想要导航提示页里的4个网站)

在plugins目录新建components.js组件。

万能导航网(想要导航提示页里的4个网站)

在nuxt.config.js中配置插件即可。

万能导航网(想要导航提示页里的4个网站)

1、自定义导航栏HeaderBar

<!-- 顶部导航headerBar.vue --><template> <div class="header-bar" :class="{'fixed': fixed, 'transparent fixed': transparent}"> <div class="header-bar__wrap flexbox flex-alignc" :style="{'background': bgcolor, 'color': color}"> <!-- >>返回 --> <div class="action hdbar-action__left isback" v-if="back && back!='false'" @click="$router.go(-1)"> <slot name="backIco" /><slot name="backText" /> </div> <!-- >>标题 --> <div class="hdbar-title" :class="{'center': center}"> <slot name="title" /> </div> <!-- >>搜索框 --> <div class="action hdbar-action__search"> <slot name="search" /> </div> <!-- >>右侧 --> <div class="action hdbar-action__right"> <slot name="right" /> </div> </div> </div></template><script> export default { props: { // 是否返回 back: { type: [Boolean, String], default: true }, // 标题 title: { type: String, default: '' }, // 标题颜色 color: { type: String, default: '#fff' }, // 背景颜色 bgcolor: { type: String, default: '#22d59c' }, // 标题是否居中 center: { type: [Boolean, String], default: false }, // 搜索框 search: { type: [Boolean, String], default: false }, // 是否固定 fixed: { type: [Boolean, String], default: false }, // 背景透明 transparent: { type: [Boolean, String], default: false }, }, data() { return {} }, methods: {}, }</script>

支持自定义背景(透明背景)、颜色、左侧图标、标题、搜索框,右侧按钮支持图标/文字/图片。

万能导航网(想要导航提示页里的4个网站)万能导航网(想要导航提示页里的4个网站)

<header-bar :back="true" :bgcolor="bgcolor" color="#ff0" center transparent> <template #backIco><i class="iconfont icon-close"></i></template> <!--标题--> <div slot="title"> <img src="~/assets/img/logo.png" height="16" /> <em>Nuxt</em> </div> <!--右侧按钮--> <div slot="right"><i class="iconfont icon-search" @click="$toast('搜索~~~')"></i></div> <div slot="right"><i class="iconfont icon-choose"></i></div> <div slot="right"><van-button type="primary" @click="saveData">保存</van-button></div></header-bar>

万能导航网(想要导航提示页里的4个网站)

<header-bar :back="true" bgcolor="#29a1f7" color="#90fff4"> <div slot="backIco"><i class="iconfont icon-arrL"></i></div> <div slot="title"> <img src="~/assets/img/logo.png" height="16" /> <em>通讯录</em> </div> <div slot="right" class="ml-20"><i class="iconfont icon-search"></i></div></header-bar>

万能导航网(想要导航提示页里的4个网站)

<header-bar :back="true" bgcolor="#ffb612" color="#ff0" center> <div slot="backIco"><i class="iconfont icon-back"></i></div> <div slot="title">理财通</div> <div slot="right" class="ml-20"><i class="iconfont icon-choose"></i></div></header-bar>

2、自定义底部Tabbar

<!-- 底部TabBar.vue --><template> <div class="tab-bar" :class="{'fixed': fixed}"> <div class="tab-bar__wrap flexbox flex-alignc" :style="{'background': bgcolor}"> <div v-for="(item,index) in tabs" :key="index" class="navigator" :class="currentTabIndex == index ? 'on' : ''" @click="switchTabs(index, item)"> <div class="ico" :class="{'dock': item.dock}"> <i v-if="item.dock" class="dock-bg" :style="{'background': item.dockBg ? item.dockBg : activeColor}"></i> <i v-if="item.icon" class="iconfont" :class="item.icon" :style="{'color': (currentTabIndex == index && !item.dock ? activeColor : color), 'font-size': item.iconSize}"></i> <img v-if="item.iconImg" class="iconimg" :src="currentTabIndex == index && !item.dock ? item.selectedIconImg : item.iconImg" :style="{'font-size': item.iconSize}" /> <em v-if="item.badge" class="nuxt__badge">{{item.badge}}</em> <em v-if="item.dot" class="nuxt__badge-dot"></em> </div> <div class="txt" :style="{'color': (currentTabIndex == index ? activeColor : color)}">{{item.text}}</div> </div> </div> </div></template><script> export default { props: { current: { type: [Number, String], default: 0 }, // 背景颜色 bgcolor: { type: String, default: '#fff' }, // 颜色 color: { type: String, default: '#999' }, // 点击后颜色 activeColor: { type: String, default: '#22d59c' }, // 是否固定 fixed: { type: [Boolean, String], default: false }, // tab选项 tabs: { type: Array, } }, data() { return { currentTabIndex: this.current } }, created() { // 匹配当前页面 const _pagePath = this.$route.path this.tabs.map((val, index) => { if(val.pagePath == _pagePath) { this.currentTabIndex = index } }) }, methods: { switchTabs(index, item) { this.currentTabIndex = index this.$emit('click', index) if(item.pagePath) { this.$router.push(item.pagePath) } } }, }</script>

支持自定义背景、颜色/选中颜色、是否固定、点击事件(返回索引值)及自定义每一个选项。

万能导航网(想要导航提示页里的4个网站)

<tab-bar bgcolor="#ddd" @click="tabbarClicked" :tabs="[ { icon: 'icon-tianjia', text: 'Home', }, { icon: 'icon-shezhi', text: 'Manage', badge: 1 }, { icon: 'icon-male', text: 'Ucenter', dot: true }]"/>

点击tabbar返回点击选项索引值。

methods: { tabbarClicked(index) { this.$toast('tabbar索引:' + index) },}

万能导航网(想要导航提示页里的4个网站)万能导航网(想要导航提示页里的4个网站)

仿咸鱼凸起按钮

<tab-bar bgcolor="#e07fff" color="#fff" activeColor="#fb4e30" fixed :tabs="[ { icon: 'icon-face', text: 'Face', dot: true, iconSize: '24px', }, { iconImg: 'https://gw.alicdn.com/tfs/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png', text: '咸鱼', dock: true, dockBg: '#fb4e30', iconSize: '.64rem', }, { icon: 'icon-search', text: '搜索', }]"/>

tabs参数配置

// iconfont图标icon: 'icon-home'// 标题text: '标题'// 自定义跳转页面pagePath: '/index'// 自定义图标图片iconImg: 'http://www.xxx.com/assets/xxx.png'// 自定义图标选中图片selectedIconImg: 'http://www.xxx.com/assets/xxx-on.png'// 底部中间凸起按钮dock: true// 凸起按钮背景,不设置则为activeColordockBg: '#09f'// 图标/图片大小iconSize: '32px'// 小圆点数字badge: 12// 是否显示小圆点dot: true

ok,就分享到这里。希望对大家有所帮助,欢迎一起交流讨论哈!

本文链接:https://www.zhantian9.com/138028.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2000000@qq.com 举报,一经查实,本站将立刻删除。

发表回复

您的电子邮箱地址不会被公开。