vue 中固定导航栏的实例代码

2024-09-30 03:27:07

点击按钮回顶

<template lang="html">

 <div class="gotop-box">
 <i @click="gotop"class="icon topIcon"></i>
 </div>
</template>

<script>

export default {

methods: {

 gotop: function () { // 点击回顶按钮 返回顶部
  setTimeout(()=>{
  document.body.scrollTop = 0
  document.documentElement.scrollTop = 0
  },1000)
 }
 }
}
window.onscroll = function() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 const goTop= document.querySelector('.gotop-box')
  if (scrollTop >200) {
   goTop.style.display = 'block'
  } else {
   goTop.style.display = 'none'
  }
}
</script>

<style lang="css">
.topIcon {
 position: fixed;
 bottom: 5rem;
 right: 1rem;
 width: 2rem;
 height: 2rem;
 border-radius: 50%;
 background:url(../assets/images/gotop.png)center center no-repeat;
 background-size: cover;
}
</style>

固定导航栏案例

<template>
 <div>
  <div id="topPart">顶部距离</div>
  <div id="navBar" :class="{isFixed:istabBar}">固定导航栏</div>
  <div id="mainPart">
   <ul>
    <li>内容部分</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    istabBar: false
   }
  },
  methods: {
   // 添加一个方法 兼容
   handleScroll () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

     // 固定导航栏
     let topBar = document.querySelector("#topPart");
     let navBar = document.querySelector("#navBar");
     let mainPart = document.querySelector("#mainPart");
     if (scrollTop > topBar.offsetHeight){
      this.istabBar = true
      mainPart.style.paddingTop = navBar.offsetHeight + "px";
     } else {
      this.istabBar = false
      mainPart.style.paddingTop = "0px";
     }
   }
  },
  mounted () {
   window.addEventListener('scroll', this.handleScroll); // Dom树加载完毕
  },
  destroyed () {
   window.removeEventListener('scroll', this.handleScroll) // 销毁页面时清除
  }
 }
</script>

<style>
 #topPart{
  width: 100%;
  height: 100px;
  background-color: yellow;
 }
 .isFixed {
  position: fixed;
  top: 0;
  z-index: 10;
 }
 #navBar {
  width: 100%;
  height: 50px;
  background-color: red;
 }
 #mainPart {
  width: 100%;
 }
 #mainPart ul {
  width: 100%;
 }
 #mainPart ul li {
  width: 100%;
  height: 40px;
  background-color: orange;
  margin-bottom: 10px;
 }
</style>

以上这篇vue 中固定导航栏的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

前端Vue项目详解--初始化及导航栏

一.项目初始化创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod
iview tabs 顶部导航栏和模块切换栏的示例代码

1.顶部导航栏: html: <div class="tab-pane"> <tabs> <tab-pane label="上崗時間明細" name="detail-report" class="tab1"> <div class="tab-pane-1"> 0000000000 </div> <upload multiple :action
vue使用ElementUI时导航栏默认展开功能的实现

本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr
vue导航栏部分的动态渲染实例

根据公司项目的需求,使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能,这里我只写到了四级菜单. 代码部分: <el-menu class='el-menu-vertical-demo' :router='true' v-for='(item, index) in navMenu' :key='index'> <el-submenu v-if='item.childs' :index='item.name' :route = 'item.value' clas
vue设置导航栏、侧边栏为公共页面的例子

首先,项目结构如下: 想要让导航栏.侧边栏变为公共页面,则要在App.vue页面中加入.假设已经有了Header.vue和Left.vue,这里就不贴出来了,App.vue代码如下: <template> <div id="app">  <el-container > <el-header>  <header-nav></header-nav>
vue 中固定导航栏的实例代码

点击按钮回顶 <template lang="html"> <div class="gotop-box"> <i @click="gotop"class="icon topIcon"></i> </div> </template> <script> export default { methods: { gotop: function () {
Android侧滑导航栏的实例代码

今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在qq里面也有,最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千.当然我的效果跟qq是没有办法比的,因为那里面的功能是在是太强大了.下面我来展示一下我做的效果截图. 我做的界面有点丑,但是对比之前已经是有了很大的改观了.想做这样的效果的话可以ps几张比较好看的图片. 下面就是粘贴我代码的时间了. activity_main.xml <cn.edu.rjxy.activity.DragLayout xmlns:android
vue中使用mxgraph的方法实例代码详解

1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })
vue中datepicker的使用教程实例代码详解

写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo
微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre
Vue中的$set的使用实例代码

Vue -$set 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.studen
Vue中保存用户登录状态实例代码

首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的"登录注册"字样变为"用户名". 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage 代码如下: register.vue中用户点击登录触发signIn方法 signIn(){ this.formData = $(".
Vue中常用rules校验规则(实例代码)

在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|
vue中axios请求的封装实例代码

axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理安装 npm i axios 封装我把axios请求封装在http.js中,重新把get请求,post请求封装了一次首先,引入axios import axios from 'axios' 设置接口请求前缀一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用
vue自定义底部导航栏Tabbar的实现代码

如图所示,要完成类似的一个底部导航切换. 首先.我们需要分为5个大的VUE文件.可以根据自己的习惯来放在不同的位置. 我将5个主要的vue文件放在了5个不同的文件夹然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 <template> <div class="itemWarp flex_mid" @click='changePage'> <span v-show='!bol'> <

vue 中固定导航栏的实例代码

相关推荐

随机推荐