分类：导航栏

2021
08-08

如何用uni-app实现顶部导航栏显示按钮和搜索框

最近公司准备做app，最终决定使用uni-app框架开发，但是当把设计图给我的时候我心里有点没底，因为他的设计图顶部长成这个样子：因为这个功能在小程序是根本无法实现的，可能受这个影响，我感觉好像实现不了，但是我还是回头看了看文档，才发现，这个功能是可以实现的，只需要在pages.json中做一些配置即可这个在官方称作app-plus,可以自定义导航区域，具体配置如下："pages":[{"path":"pages/index/index",... 继续阅读 >
2021
07-04

ViewPager+Fragment实现侧滑导航栏

ViewPager+Fragment实现侧滑导航栏 本文实例为大家分享了ViewPager+Fragment实现侧滑导航栏的具体代码，供大家参考，具体内容如下本文主要整理和记录下本来想用Gif图片，这里暂时就用图片代替下吧：Activity：packagecom.example.administrator.android006;importandroid.support.v4.app.Fragment;importandroid.support.v4.app.FragmentActivity;importandroid.support.v4.app.FragmentPagerAdapter;importandroid.support.v4.view.ViewPager;importandroid.... 继续阅读 >
2020
12-14

uni-app 自定义底部导航栏的实现

这是我目前发现较好的uni-app自定义底部导航栏方法，其他方法的缺点主要是在切换时，要么会闪烁，要么会每点击一下，都会请求一次数据。如果有其他更好的方法，欢迎评论留言，最近才开始用uni-app写项目，之前只是看了下文档。1.tabbar组件<template><viewclass="tabbar-container"><view:style="{color:currentIndex==index?'#007EFF':'#333333'}"v-for="(item,index)intabbarList":key="index"... 继续阅读 >
2020
11-25

JavaScript实现HTML导航栏下拉菜单

JavaScript实现HTML导航栏下拉菜单 JavaScript实现HTML导航栏下拉菜单[悬浮显示]前端界面进行设计时，我们会遇到鼠标悬浮在某选项上，然后就会凭空显示出菜单出来，这种设计的确受到了很多人的青睐。其实纯css也是可以实现的，但是会有一些限制，必须如要显示的菜单需要作为鼠标悬浮元素的子元素，选择器优先级等等。废话不多说，直接看效果！样式有点丑。代码实现（JavaScript）1、获取要悬浮的对象和菜单对象//获取需要悬浮的对象letshow=document.getElement... 继续阅读 >
2020
10-09

Vue实现导航栏菜单

Vue实现导航栏菜单 本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>导航栏左</title><linkrel="stylesheet"href="css/bootstrap.min.css"/><linkrel="stylesheet"href="css/titleMenuLeft.css"/><scripttype="text/javascript"src="js/vue.min.js"></script></head>... 继续阅读 >
2020
10-09

vue 导航锚点_点击平滑滚动,导航栏对应变化详解

vue 导航锚点_点击平滑滚动,导航栏对应变化详解 最终效果如下：（注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内）-chrome完成这个功能需要注意：1、点击导航平滑滚动到导航内容处2、div内滚动时当前导航需要做响应代码如下：1、html结构（因为从项目里截取代码，allMenuList数据内容就不贴出来了，不算难点，这个可以根据自己的项目进行调整，相应的方法和类名别弄错就行）<divclass="all-title">全部应用<pclass="fr"><spanv-for="(item,index... 继续阅读 >
2020
09-28

element-ui 实现响应式导航栏的示例代码

开始之前按照计划，前端使用Vue.js+ElementUI，但在设计导航栏时，发现element没有提供传统意义上的页面顶部导航栏组件，只有一个可以用在很多需要选择tab场景的导航菜单，便决定在其基础上改造，由于我认为实现移动端良好的体验是必须的，所以便萌生了给其增加响应式功能的想法。需求分析与拆解假设我们的导航栏有logo和四个el-menu-item。给window绑定监听事件，当宽度小于a时，四个链接全部放入右侧el-submenu的子菜单：当宽度... 继续阅读 >
2020
09-27

小程序自定义导航栏兼容适配所有机型（附完整案例）

小程序自定义导航栏兼容适配所有机型（附完整案例） 前言大部分情况下我们都是使用微信官方自带的navigationBar配置，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。思路隐藏官方导航栏获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算导航栏高度编写新的导航栏页面引用自定义导航正文隐藏官方导航栏隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。全局隐藏//app.json"window":{"navigationStyle":"custom"}页面... 继续阅读 >
2020
09-27

详解Nuxt内导航栏的两种实现方式

详解Nuxt内导航栏的两种实现方式 方式一|通过嵌套路由实现在pages页面根据nuxt的路由规则，建立页面1.创建文件目录及文件根据规则，如果要创建子路由，子路由的文件夹名字，必须和父路由名字相同所以，我们的文件夹也为index，index文件夹需要一个默认的页面不然nuxt的路由规则就不能正确匹配页面一级路由是根路由二级路由是index，user，默认进入index路由下面是router页面自动生成的路由{path:"/",component:_93624e48,children:[{path:"",c... 继续阅读 >