导航栏（侧边栏）加载页面方法

最新推荐文章于 2019-06-01 19:54:14 发布
最新推荐文章于 2019-06-01 19:54:14 发布
阅读量1.5k 收藏 2
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VR_dancy/article/details/81673150
版权

1、固定的不变内容

2、引用导航栏的页面

3、加载页面的js方法*（重点！）

项目整体架构

最终结果

JiaoJiao Zhang
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
侧边栏的简单实现（使用drawerLayout）
granton
10-30 3252
不能算真正意义上的侧边栏 首先s
左侧导航栏固定，点击进行路由跳转右侧部分显示不同内容
weixin_45096939的博客
01-19 2271
路由跳转的方法：this.$router.push(' 定义的路由名 ')；表示路由占位，在路由占位的时候可以把路由写活。在router中定义路由名称时可以用children定义子级路由；头部和左侧的导航栏不动，点击左侧导航栏中的按钮右侧的内容发生变化。
vuepress搭建个人博客或则书写文档
Haines
07-25 6843
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。这篇文章给大家介绍了VuePress搭建个人博客的过程，感兴趣的朋友一起看看吧。 VuePress vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文...
页面局部加载
love545520372的博客
04-26 732
var time = new Date().toLocaleString().replace(/[年月]/g,'-').replace(/[日上下午]/g,''); $("#main").empty();         var str = "         "style=\"width:100%;height:100%;\" src=\"/url?id="+1+"&queryTi
使用Ajax在HTML页面中局部刷新页面（左边菜单右边页面）
Cenmen_17714的博客
07-09 9162
index.html<a href="javascript:void(0);" onclick="loadXMLDoc('member.html')">查看用户</a><div id="mainbody">欢迎登录！</div>index.html中的Ajax代码<script> function loadXM
vue设置导航栏、侧边栏为公共页面的例子
10-16
今天小编就为大家分享一篇vue设置导航栏、侧边栏为公共页面的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
侧栏弹出导航栏
04-26
仿酒仙网的一款jQuery侧栏弹出导航栏特效　
CSS3左侧边栏3D酷炫导航展开效果jquery特效代码.zip
07-11
CSS3左侧边栏3D酷炫导航展开效果jquery特效代码，可以用于企业网站或者商城网站，一款大气的导航效果，php中文网推荐下载！
MoodleSidebarPlugin：减少访问课程的点击（和沮丧）
03-03
这是一个小型实用程序插件，可将您已选修过的其他课程的链接放入导航栏的侧边栏中，以方便导航。 特征 该插件将仅填写该学生当前所学课程。 第一次启动该插件时，将需要一些时间来查找和存储该学生正在学习的课程，...
react-hooks-practical-projects：一些带有react钩子的实际项目。 要了解新技术，最好的方法是制作项目
02-22
> useEffect和条件渲染游览-> 评论-> 问题-> 菜单-> 标签-> 滑块-> 形式Lorem Ipsum Generator-> 颜色阴影生成器-> 杂货芽-> useRef 导航栏-> useContext 模态和侧边栏-> 条纹子菜单-> useReducer和useContext ...
JQuery实现动态菜单以及刷新局部页面实例
03-04
JQuery实现动态菜单以及刷新局部页面实例
标题栏和导航栏的组合界面实现方法fragment嵌套+viewpager
hzmhzm123的博客
08-28 1105
对于这种界面大家都很熟悉，上面的标题栏滑动或点击的时候可选择不同的界面，下面的导航栏点击可切换不同的界面，这样的效果可以在一个Acitivity里面加载最多的页面： 对于这样的界面如何实现呢，其实就是Fragment的嵌套，点击下方的音乐按钮的时候会加载上面包括标题栏的Fragment界面，这个Fragment界面嵌套在ViewPager中，又包括了期刊、单曲等Fragment界
实现导航栏下拉菜单列表页面
林老师带你学编程
04-08 3739
1.wxml页面代码： <!--选项卡--> <view class="tabTit box tc bg_f"> <view class="flex1{{tab[index]?' active':''}}" wx:for="{{tabTxt}}" wx:key="" data-index="{{index}}" bindtap=&q
ajax实现简单的点击左侧菜单，右侧加载不同网页
weixin_30950607的博客
05-11 2243
实现：ajax实现点击左侧菜单，右侧加载不同网页（在整个页面无刷新的情况下实现右侧局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）图片.png原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据，点击的时...
Vue简单实现-点击顶部导航栏动态改变左侧导航显示内容
热门推荐
qq_42589862的博客
06-01 1万+
说明： 1.不清楚这样写会不会影响性能，只是觉得这样比较简单 2.通过 兄弟组件传值 + v-if 实现 3.不改变页面地址 做出来的效果如下： 1.新建三个vue组件，其中Home是父组件，Header和BodyLeft是兄弟组件 2.在main.js中创建总线 let bus = new Vue() Vue.prototype.bus = bus 3.编写...
element 导航菜单，嵌套路由初始化时，页面导航菜单选中，但是页面内容不变的解决办法。
xuerwang的博客
08-17 9315
问题描述： <template> <div class="detail-middle"> <el-menu router default-active="/pointDetail/:id/firePointMap" class="el-menu- demo" mode="horizontal">
vue侧边菜单栏导航
最新发布
09-15
Vue侧边菜单栏导航是一种常用的网页导航方式。它通常位于页面的侧边栏，用于展示网站或应用的不同功能页面或模块，并提供用户快速切换页面的功能。 Vue框架提供了开发这种导航组件的便利性。我们可以使用Vue的组件化能力，将侧边菜单栏导航拆分成多个组件，使得每个导航项都可以独立管理和维护。这样，当我们需要增加、删除或修改导航项时，只需要修改相应的组件代码，无需影响其他部分。 在实现侧边菜单栏导航时，我们可以使用Vue Router进行页面的切换。通过在导航菜单组件中配置路由链接，当用户点击某个导航项时，Vue Router会根据配置的路由规则，动态加载对应的组件，并渲染到主内容区域。 为了增加用户体验，我们可以使用Vue的动画效果来实现导航菜单的展开和收起。当用户点击导航菜单的折叠按钮时，我们可以通过动画效果平滑地展开或收起导航菜单，使页面的切换过渡更加流畅。 另外，为了提高导航的可用性，我们可以在导航菜单中添加一些交互效果，比如在用户当前所处页面的导航项上添加高亮效果，以提示用户当前所在的位置。我们也可以为导航菜单项添加一些图标或标识，使得用户更容易辨认各个功能页面。 总之，Vue侧边菜单栏导航是一种简洁、灵活、易于维护的网页导航方式。通过合理的组件划分、使用Vue Router实现页面切换、应用动画效果和交互效果，能够为用户提供良好的导航体验，并提高网站或应用的可用性和用户满意度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值