vue手写a-z导航栏

2024-09-01

vue-cli 3.0 实现A-Z字母滑动选择城市列表

项目地址: https://github.com/caochangkui/vue-cli3 项目代码: 城市列表首页: City.vue <template> <div id="city">  <div class="word" v-show="

Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之前,导航栏的效果如下图所示: 当页面向上滑动之后,导航栏始终固定在页面的上方. 具体代码: 写入事件监听,监听滚动条. mounted () { // 事件监听滚动条 window.addEventListener('scroll', this.watchScroll) } 然后在 meth

Vue 如何实现一个底部导航栏组件

参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现实现template 和style 我用的布局工具是bootstrap,图标是阿里巴巴的iconfont <template> <div id="TabBar" class="tab-bar row"> <div class="co

[前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方法是这样的--全部设置浮动: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:

JS写的二级导航栏（利用冒泡原理）

今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参考一下, 该注释的地方我都给大家注释上了思路:给所有的 li 加上鼠标移入事件当鼠标移入时会触发事件,由于事件的冒泡机制,每次二级导航栏里的事件触发时同时会触发父级 li 的事件调试时可以用e.stopPropagation()阻止事件冒泡来看看冒泡和不冒泡的区别 <!DOCTY

基于vue手写tree插件那点事

目录 iview提供的控件手写控件手写控件扩展手写控件总结 # 加入战队微信公众号主题 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示.因为大数据全部展示出来对于用户来说是不友好的.今天我们自己手写一个Tree插件. iview提供的控件 iview已经很成熟了,如果说我写的控件和iview提供的控件谁更好,那肯定是选择iview , 手写控件只是为了更好的了解vue父子组件之间的通信的. 请读者还是不要拿我的控件和iview或者其他第三方的去对比.下面我

我的Vue之旅、05 导航栏、登录、注册 (Mobile)

第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏.仿B站的登录.注册页面. 代码仓库 alicepolice/Vue-05 (github.com) 构建项目新建项目导入bootstrap-icons-vue bootstrap-icons-vue - npm (npmjs.com) 导入Tailwind 在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档安装VS

Vue页面手动刷新，导航栏激活项还原到初始状态问题解决方案

场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterprise/list),顶部导航激活项还原到初始状态(这里默认是“工作台”项). 原理:每次刷新都会重新实例化Vue,也就是会调用created方法. <template> <el-menu :default-active="defaultActiveIndex" clas

vue手写的轮播图片，解决已经修改data中的值，页面标签已绑定，但页面没效果

1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <link rel=&q

vue手写轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #app { width: 1200px; height: 500px; border: 1px solid red; margin: 50px auto; } .swiper { width: 100

vue 手写倒计时，样式需要自己调。（亲测可用，就是没有样式）

先写一个 js 文件,这个文件是工具类文件,需要单独开一个js // 计算出时间戳的具体数据:比如将85400转化为 n天n时n分n秒 export function formateTimeStamp(timeStamp) { var day; var hour; var min; var seconds; day = parseInt(timeStamp / (24 * 60 * 60)) // 计算整数天数 var afterDay = timeStamp - day * 24 * 60 *

vue 手写组件集合

Num.1 : 链接向右滑动, 显示删除按钮, 根据touchStart touchEnd 的 clientX 差距 > 30; 说明是向左滑动, 显示; 改变 e.currentTarget.parentElement.dataset.type (还有这种操作) data -type = 1, 通过css显示删除按钮, li [data-type=1]{ transform: translate3d(-2rem,0,0) } 这个体验感觉不是很好, 在用户滑动完之后, 才

基于Vue手写一个下拉刷新

当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具体看源码即可. 思路 touchstart 记录开始位置 touchmove 判断上拉.下拉(暂时只用到了下拉) touchend 根据下拉.上拉位置判断是否达到下拉刷新.上拉加载更多 @scroll.passive="onScrollFn($event)" 记录屏幕滚动,用来处理上滑时h

ElementUI 复杂顶部和左侧导航栏实现

描述:如图项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { topNavState: 'home', leftNavState: 'home' } export default new Vuex.Store({ state }) App.vue内容: <template> <div id="app&qu

[置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了.这个bootstrap侧滑菜单更专业的名字叫做手机导航栏.我也比较这个名字,更符合bootstrap的特性.所以我这篇文章介绍的更容易的一种

前端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

用Vue来实现音乐播放器（五）：路由配置+顶部导航栏组件开发

路由配置在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件import Recommend from '../components/recommend/recommend.vue' import Singer from '../components/singer/singer.vue' import Rank from '../components/rank/ra

Vue导航栏在特定的页面不显示~

最近写vue项目遇到一些问题,我把导航栏组件放在了app.vue中,让他在每个页面都能显示了,但遇到了一个问题,在登录以及注册页面导航栏是不合理不允许存在的解决方法: 公共模块的内容可以放在App.vue中但是通常登录页面是不需要导航的,那么就需要规避登录页这时,就可以采用keep-alive结合$route.meta来实现这个功能.keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染.$route.meta则可以选择让需要的页面才展示.修改App.v

使用vue给导航栏添加链接

如下面的导航栏,使用vue技术给该导航栏增加链接: js代码为: navigation:function(){ new Vue({ el: '#navUl', data: { menuData:{ '个人首页':'personal-home.html', '人才分析':'personal-analysis.html', '基本信息':'personal-info-base.html', '技能态度':'skill-attitude.html', '参与项目':'involved-project.

CSS学习笔记六：写原生导航栏

因为刚开始学习CSS时,只了解了一些基本样式,然后就跑去学习bootstrap.bootstrap是个不错的东西,挺好玩,起码让你写界面写的轻轻松松,几行引入代码,再来个复制粘贴就解决了,而且bootstrap在菜鸟教程中有拖拉拽就能做成界面,这就好比写myeclipes 的图形界面,贼儿溜方便.但现在得空了,我想还是要好好学习下如何修建导航栏出来,从最基本的属性出发,一点一点构建原生导航栏.本次写的是侧拉导航栏和下拉导航栏,这两样在网站都比较常见. 1.确定你所要写导航栏有几种类型,一般情况下

使用vue封装一个tab栏切换的左侧导航栏的公共组件

首先看最终效果图: 1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css index.vue内的template部份代码如下:(最新更正:代码里所有a标签部份应该用router-link) <template> <div>  <div class="tabNav"> <div style="border: 1px solid rgba(2