基于Bootstrap模板创建门户网站vue项目03_爱学习的甲壳虫的博客-程序员宅基地_bootstrapvue模板

技术标签: 笔记  vue.js  bootstrap  javascript  

门户网站VUE项目(一)
门户网站VUE项目(二)
门户网站VUE项目(三)

页面组件优化

面包屑导航

breadcrumbs是以面包屑效果展示当前页的路径信息(Home / blog),如果能在路径上添加导航点击事件或展示自定义信息会不会用户体验更好些呢。
修改/src/components/layout/component/Breadcrumbs.vue如下:

<template>
	<!-- ======= Breadcrumbs ======= -->
	<section class="breadcrumbs">
	  <div class="container">

		<ol>
		  <li><a href="/">Home</a></li>
		  <li><a :href="action">{
   {tag}}</a></li>
		</ol>
		<h2>{
   {msg}}</h2>

	  </div>
	</section><!-- End Breadcrumbs -->
</template>

<script setup>
defineProps({
      
  tag: String,
  msg: String,
  action: {
      
	  type: String,
	  default: "#",
	  required: false
	  },
})
</script>

<style>
</style>

定义组件引用属性tag—当前页面的标记、msg—自定义展示信息、action—点击跳转地址。在集成Breadcrumbs组件的页面只要在标签里添加属性声明即可,如:<Breadcrumbs tag="blog" action="/BlogPage" msg="Blog"></Breadcrumbs>

导航栏点击不刷新页面

  1. 导航选项优化
    我们的导航栏navbar所导航的位置多为主页Home渲染后的的锚点。如果在主页浏览时点击导航栏选项不刷新页面即可定位到锚点,同时在浏览其他页面时点击导航栏选项既可以跳转又可以定位锚点,这样的用户体验会不更好些呢。
    解决思路:在Header.vue添加组件属性tag—当前页面的标记、msg—描述信息,<nav>标记里的导航选项<a>标记的href属性改为动态属性(判定是否当前引用页是HomePageBlogPage)。

  2. 移动设备终端导航栏优化
    手机、iPad等移动终端下的navbar效果稍有不同,可以点击展开导航列表,并且点击导航选项后可以自动关闭展开的导航列表。
    实现思路: 经浏览器开发者工具(按键:F12)观察移动端#navbar元素默认隐藏,打开导航列表时增加了.navbar-mobilecss样式,并且导航列表打开/关闭按钮由.bi-x.bi-list两个css样式控制,因此我们需要添加一个点击事件控制列表的展示与隐藏的切换。
    navbar mobile active

  3. 调整后/src/components/layout/Header.vue代码如下:

<template>
	
	  <!-- ======= Header ======= -->
	  <header id="header" class="fixed-top d-flex align-items-center">
	    <div class="container d-flex align-items-center">
	      <h1 class="logo me-auto"><a :href="(homePage==tag)?'#':homePage">Presento<span>.</span></a></h1>
	
	      <nav id="navbar" :class="['navbar','order-last','order-lg-0', (isNavbarMobileOpen?'navbar-mobile':'')]">
	        <ul>
	          <li @click="openNavbar"><a class="nav-link scrollto" :href="(homePage==tag)?'#':(homePage+'#hero')">Home</a></li>
	          <li @click="openNavbar"><a class="nav-link scrollto" :href="(homePage==tag)?'#about':(homePage+'#about')">About</a></li>
	          <li @click="openNavbar"><a class="nav-link scrollto" :href="(homePage==tag)?'#services':(homePage+'#services')">Services</a></li>
	          <li @click="openNavbar"><a class="nav-link scrollto" :href="(homePage==tag)?'#portfolio':(homePage+'#portfolio')">Portfolio</a></li>
	          <li @click="openNavbar"><a class="nav-link scrollto" :href="(homePage==tag)?'#team':(homePage+'#team')">Team</a></li>
	          <li @click="openNavbar"><a :href="(blogPage==tag)?'#blog':(blogPage+'#blog')">Blog</a></li>
	          <li class="dropdown" v-show="false"><a @click="setDropdownLeave(1)" href="javascript:;"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
	            <ul :class="[dropdownLeave==0?'':'dropdown-active']">
	              <li @click="openNavbar"><a href="javascript:;">Drop Down 1</a></li>
	              <li class="dropdown"><a @click="setDropdownLeave(2)" href="javascript:;"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
	                <ul :class="[dropdownLeave==2?'dropdown-active':'']">
	                  <li @click="openNavbar"><a href="javascript:;">Deep Drop Down 1</a></li>
	                  <li @click="openNavbar"><a href="javascript:;">Deep Drop Down 2</a></li>
	                  <li @click="openNavbar"><a href="javascript:;">Deep Drop Down 3</a></li>
	                  <li @click="openNavbar"><a href="javascript:;">Deep Drop Down 4</a></li>
	                  <li @click="openNavbar"><a href="javascript:;">Deep Drop Down 5</a></li>
	                </ul>
	              </li>
	              <li @click="openNavbar"><a href="javascript:;">Drop Down 2</a></li>
	              <li @click="openNavbar"><a href="javascript:;">Drop Down 3</a></li>
	              <li @click="openNavbar"><a href="javascript:;">Drop Down 4</a></li>
	            </ul>
	          </li>
	          <li @click="openNavbar"><a class="nav-link scrollto" :href="(homePage==tag)?'#contact':(homePage+'#contact')">Contact</a></li>
	        </ul>
	        <i @click="openNavbar" :class="['bi', 'bi-list', 'mobile-nav-toggle', (isNavbarMobileOpen?'bi-x':'bi-list')]"></i>
	      </nav><!-- .navbar -->
	
	      <a :href="(homePage==tag)?'#about':(homePage+'#about')" class="get-started-btn scrollto">Get Started</a>
	    </div>
	  </header><!-- End Header -->

</template>

<script>
export default{
      
	name: "Header",
	props:{
      
		tag: String,
		msg: String,
	},
	data() {
      
		return {
      
			homePage: "/HomePage",
			blogPage: "BlogPage",
			isNavbarMobileOpen: false,
			dropdownLeave: 0,
		};
	},
	methods:{
      
		openNavbar(){
      
			// select('#navbar').classList.toggle('navbar-mobile')
			// this.classList.toggle('bi-list')
			// this.classList.toggle('bi-x')
			if(document.body.clientWidth<=1000){
      
				this.isNavbarMobileOpen = this.isNavbarMobileOpen?false:true;
				if(this.dropdownLeave != 0){
      
					this.dropdownLeave = 0; //关闭下拉
				}
			}
		},
		setDropdownLeave(leave){
      
			if(document.body.clientWidth<=1000 && this.isNavbarMobileOpen){
      
				if(this.dropdownLeave<leave){
      
					this.dropdownLeave = leave;
				}else if(leave==1){
      
					this.dropdownLeave = 0; //关闭下拉
				}else if(this.dropdownLeave==leave){
      
					this.dropdownLeave = 1; //关闭二级下拉
				}
			}
		}
	}
}

</script>

<style>
</style>

同样地,在集成Header组件的页面只要在标签里添加属性声明即可,如:<Header tag="/BlogPage"></Header>

isotope流式布局与元素筛选

首页Portfolio模块展示的是图片墙,支持流式布局,通过isotope这个插件实现交互的(感兴趣的进入研究下:isotope),同时上边有按钮可以切换筛选不同标签组的元素。
portfolio-filteractive

/src/components/layout/component/Portfolio.vue添加isotope初始化声明与筛选事件绑定,同时删除/src/assets/js/main.js对应的代码块。并且在id="portfolio-flters"<ul>标记添加属性ref="portfolioFlters",在含class="portfolio-container"<div>标记添加属性ref="portfolioContainer"。添加点击事件初始化代码如下:

<script>
import AOS from "aos"

export default{
      
	data() {
      
		return {
      
			portfolioContainer: {
      },
			portfolioIsotope: null,
			portfolioFilters: {
      },
		};
	},
	methods:{
      
		filterActive(e) {
      
			e.preventDefault();
			if(this.portfolioIsotope == null){
      
			  // 延迟初始化,解决高度过低问题
			  this.portfolioIsotope = new Isotope(this.portfolioContainer, {
      
				itemSelector: '.portfolio-item',
				layoutMode: 'fitRows'
			  });
			}
			
			this.portfolioFilters.forEach((el) => {
      
			  el.classList.remove('filter-active');
			});
			let that = e.currentTarget;
			that.classList.add('filter-active');

			this.portfolioIsotope.arrange({
      
			  filter: that.getAttribute('data-filter')
			});
			this.portfolioIsotope.on('arrangeComplete', () => {
      
			  AOS.refresh()
			});
		},
		/**
		* Init Porfolio isotope and filter
		*/
		initIsotope(){
      
			this.portfolioContainer = this.$refs.portfolioContainer;
			
			//console.log("before start container height:", this.portfolioContainer.style.height)
			if (this.portfolioContainer) {
      
			  // 高度过低(126px) --> 延迟初始化
			  /* this.portfolioIsotope = new Isotope(this.portfolioContainer, {
				itemSelector: '.portfolio-item',
				layoutMode: 'fitRows'
			  }); */
			  //console.log("start Isotope container height:", this.portfolioContainer.style.height)
			
			  this.portfolioFilters = this.$refs.portfolioFlters.childNodes;
			
			  let that = this;
			  this.portfolioFilters.forEach((el) => {
      
				el.onclick = that.filterActive;
			  });
			  
			}
		
		}
	},
	mounted() {
      
		let that = this;
		this.$nextTick( () =>{
      
			that.initIsotope();
		});
		
	}
}
</script>

回到顶部按钮

回到浏览页面顶部的实现相对简单<a href="#">这样的标记即可满足回到顶部功能,观察原来的静态模板浏览效果可以发现,当当前屏幕(滚动)位置不是最顶部的时候该按钮是显示的,这时css样式含class="back-to-top"<a>标记增加了.activecss样式,点击“回到顶部”操作后按钮消失.active这个css样式也消失。因此我们增加个屏幕滚动监听事件即可。
修改/src/components/layout/Footer.vue,在含class="back-to-top"css样式的<a>标记增加 ref="backToTopBtn" 属性;添加事件监听代码如下:

<script>
export default{
      
	mounted() {
      
		window.addEventListener('scroll', this.backToTopBtnHidden);
	},
	destroyed(){
      
		window.removeEventListener('scroll', this.backToTopBtnHidden);
	},
	methods: {
      
		//监听滚动-返回顶部且隐藏按钮
		backToTopBtnHidden(){
      
			let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			if (!!document.documentElement.scrollTop &&document.documentElement.scrollTop >= 300){
      
				this.$refs.backToTopBtn.classList.add('active'); //显示
				return ;
			}
			this.$refs.backToTopBtn.classList.remove('active'); //隐藏
		}
  },
}
</script>

上一篇


感谢您的阅读!
如有不足之处请多指教。。。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013032479/article/details/123178907

智能推荐

利用 Chrome 浏览器来模拟手势_weixin_30376453的博客-程序员宅基地

现在移动端的应用可谓是越来越火爆了,随着 HTML5 和 CSS3 的诞生,那么移动端的网页也越来越普遍了,那么有时候开发人员制作移动网页的时候,有时候要模拟手机的手势来测试自己写的程序代码,却苦苦寻求不到自己合适的模拟器。那么在这里我将介绍一种谷歌触屏模拟器的插件,让开发者更好的开发自己的手机端的网页。操作一:按下键盘按键 F12 调出控制台;操作二:操作三...

SpringBoot项目实战(010)Spring Security(四)Voter_IT老吴的博客-程序员宅基地_springsecurity voter

Spring Security 鉴权Spring Security中,系统进行认证以后,获得了当前的Authorities,紧接着,Spring Security会进行鉴权,判断他是否有权限。这个判断主要通过投票管理器+投票器实现。投票器实现某一个条件的权限判断,投票管理器设置策略,对多个投票器的判断结果进行综合。整个认证鉴权的代码流程图,如下:websecurity首先,我们修改一下WebSecurityConfig:package com.it_laowu.springbootstudy

list中对象的取值_A-Clown的博客-程序员宅基地_list对象拿个值

相信很多小伙伴都碰到过这种情况,查询数据库的数据放到list里面,但是又要用到里面的值 -。- 下面就能拯救你,当然不止这一种方法。 直接上代码List<A> aList = new ArrayList<A>();for(int i = 0;i < aList.size();i++){ A a = aList.get(i);//直接拿这个a去点get或者set就行了 a.get

xUitls3框架的入门级使用及部分解析_智慧树下你和我的博客-程序员宅基地_xutls3.0 支持同时下载么

文章目录xUtils3入门使用及部分解析xUtils简介实操部分:搭建初始化环境1.Gradle构建时添加以下依赖:2.加入所需要的权限:3.进行初始化(记得是在application中进行初始化,这点与旧版不一致)4.在配置文件中进行引用:5.在MainActivity也要进行声明ViewUtils模块的使用@ContentView()@ViewInject()@Event()DbUtils模块的使用1.创建并配置DbManager2.创建实体类3.实现CRUD方法HttpUtils模块的使用Get请求P

Android和js交互,选择照片_小强_程序猿_的博客-程序员宅基地

Android和js交互,选择照片android 的webview和js相互调用 - 1.html代码 html中有个img标签,用来显示图片&amp;amp;lt;!DOCTYPE html &amp;amp;gt;&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta http-equiv=&amp;amp;quot;Content-Type&amp;amp;quot; cont

过滤器使用方法_下雨听风的博客-程序员宅基地_过滤器方法

package cn.dali3.code15;import java.io.File;import java.io.FileFilter;/*过滤器的使用 * * 需求,过滤出桌面A文件夹下所有以.java结尾下的文件 * * 在File类中,listFiles有两个重载方法 * 1.public File[] listFiles(FileFilter filter) * ...

随便推点

spark(二)创建RDD时默认分区数_herokang的博客-程序员宅基地_spark默认分区数

一、概述Spark的分区数对于Spark性能调优很重要,如果分区数少,那么并行执行的task就少,比如分区数为1,即使你分配的Executor很多,而实际执行的Executor只有1个,如果数据量很大的话,那么任务执行的就很慢,因此熟悉各种情况下默认的分区数对于Spark调优就很有必要了,特别是执行完算子返回的结果分区数为1的情况,更需要特别注意。二、默认最小分区数:defaultMinPar...

关于U3D触发器的错误_qq_34644914的博客-程序员宅基地

今天写触发器的时候碰到NullReferenceException: Object reference not set to an instance of an object的错误 找了半天才知道是忘记调用GameObject.Find的方法导致unity无法找到其他类中的方法所致,只要给他对象就解决了这个问题...

【狂神说Java】JUC并发编程_隔壁郑同学的博客-程序员宅基地

【狂神说Java】JUC并发编程准备工作新建一个Maven项目,引入一个lombok依赖. &lt;dependencies&gt; &lt;dependency&gt; &lt;groupId&gt;org.projectlombok&lt;/groupId&gt; &lt;artifactId&gt;lombok&lt;/artifactId&gt; &lt;version&gt;1.18.8&lt;/vers

纯前端生成pdf----js动态获取后台数据生成pdf_慢半拍、的博客-程序员宅基地

纯前端导出pdfjs动态数据渲染pdf动态数据生成pdf动态数据生成页面pdfjs动态生成页面pdf预览pdf

统计学习方法第四章朴素贝叶斯法-李航_Font Tian的博客-程序员宅基地

第4章 朴素贝叶斯法朴素贝叶斯 (naive Bayes) 法是基于贝叶斯定理与特征条件独立假设的分类方法。对于给定的训练数据集,首先基于特征条件独立假设学习输入/输出的联合概率分布;然后基于此模型,对给定的输入x,利用贝叶斯定理求出后验概率最大的输出Y。4.1 朴素贝叶斯法的学习与分类基本方法朴素贝叶斯法通过训练数据集学习X和Y的联合概率分布P(X,Y)。

杭二学习Day6——比赛_zsyz_ZZY的博客-程序员宅基地

背景:最后一天了。T1\text{T1}T1:que\text{que}que:设每一点iii到最远点的距离是disidis_idisi​,求min⁡{disi}\min\{dis_i\}min{disi​}。sol\text{sol}sol:显然ans=⌈树的直径2⌉ans=\lceil \frac{树的直径}{2}\rceilans=⌈2树的直径​⌉。Θ(n)\Theta...

推荐文章

热门文章

相关标签