顶部导航栏作为我们使用APP时每天都要遇到的组件，出镜频率极高，看似简单，其实我们在绘制界面的时候还是有许多细节需要注意的。本篇文章主要汇总了常见的四种顶部导航栏设计样式，希望能帮助大家更好地理解导航栏这个组件。常规导航栏所谓常规导航栏，主要是指固定在状态栏下，能清晰分辨出的一行导航栏，主要由操作图标、标题、搜索框、背景等组成，大致分成三种，分别是简单标题导航栏、搜索框导航栏以及Tab/分段控件导
源码地址 https://github.com/ustbhuangyi/better-scroll.git 原生滚动 .hello { overflow-y: scroll; } BetterScroll <script> import BetterScroll from 'better-scrol ...
转载
2021-07-20 11:00:00
817阅读
2评论
来一个滚动显示数据的插件 https://chenxuan0000.github.io/vue-seamless-scroll/zh/ 感觉这是我用的相对来说比较好用的滚动插件了，用法很简单，按照说明来就可以了。 这是我用了之后的效果。 实际用上还是蛮流畅的，不像动图一样一卡一卡的。
原创
2022-06-23 12:49:37
847阅读
在项目中，经常需要我们自己封装组件，需要对组件进行抽取至封装度最高。这样一来，使这个组件复用性变得非常高，往往可以直接把封装好的组件文件一拖拽到另外的项目就可以直接使用。现在来封装一个底部导航栏组件。首先先来看封装好的组件的效果图,文末尾附项目下载地址，可以直接拖过去使用： 首先，我们需要思考，如何才能写出这一个组件以及如何对他进行不断抽取的思想。我
转载
2024-04-12 16:03:09
1416阅读
实现： 方法1： html结构 <div class="tab-nav"> <div class="nav-box"> <div class="nav-tab-item on">Intel</div> <div class="nav-tab-item">Microsoft</div> <div cl
原创
2022-07-06 12:03:15
425阅读
vue-count-to就是一个组件插件，咱们引入进来，可以去打印一下，它就是一个组件实例，使用components注册一下，就可以在模板中使用了，具体方式如下。
原创
2022-07-17 00:18:56
1738阅读
在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了。 以滴滴为例，可以是这样竖向滚动的列表，如图所示：也可以是横向滚动的导航栏，如图所示：可以打开“微信 —> 钱包—>滴滴出行”体验效果。我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。什么是 better-scrollbetter-scroll 是一个移动端滚动的解决方案，它是基于
转载
2023-12-14 05:26:21
123阅读
<script> import BetterScroll from 'better-scroll' export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App', scroll: nu ...
转载
2021-07-20 21:30:00
891阅读
2评论
当前版本 "better-scroll": "^2.4.1", scroll事件 滚动的实时坐标(与probeType属性有关) <script> import BetterScroll from 'better-scroll' export default { name: 'HelloWorld'
转载
2021-07-20 19:17:00
431阅读
2评论
使用场景：用户登录后获取菜单列表，然后动态添加路由和菜单，实现根据用户权限实现动态添加路由。昨天搞了半个晚上一直困惑使用(Router.addRoutes)在路由拦截器里，一直问题，今天早上到了公司，咨询了下老大和一个前段大佬终于搞定了，直接上代码了login.vue（登录界面）import { resetRouter } from "@/router"
async login()
转载
2024-07-23 13:17:09
429阅读
目录 介绍下载引入使用 配置项事件refresh/load介绍Vuescroll 一个功能强大，有多种模式的基于Vue.js的滚动条插件，它的原理是创建 div 用于包裹要滚动的内容，操后操作容器的样式或者scrollTop或scrollLeft完成内容的滚动。设计它的目的是用来美化和增强你的滚动条。你可以通过更改配置来选择不同的模式:
native 模式: 类似于原
转载
2024-01-12 15:07:10
65阅读
1.js代码/** * Created by EDUASK on 2016/5/20. */$(function(){ //引入id标签; var navtive=$(crollHeigh
原创
2022-08-04 16:46:08
60阅读
scroll-view文档里有说明。我中间就遇到了这个问题，不管我怎么弄不会出现滚动，超出的部分会折行掉下去！后来我发现scroll-view下的子级必须要 displau:inline-block;否则无效不会出现滚动。<scroll-view scroll-x="true" class="navList" scroll-with-animation scroll-left="{...
原创
2022-01-10 14:05:07
293阅读
需要使用vue做一个专题页面。 滚动页面指定区域导航高亮。 BetterScroll：可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式？ 滚动页面事件，对比当前页面的位置与元素的位置，如果当前滚动的区域位置大于元素的位置，导航添加class，其他去掉class进行样式切换。 我使用
转载
2018-11-03 15:39:00
212阅读
2评论
1.搭建脚手架 因为全局安装vue-cli 脚手架，在之前就已经安装好了。所以我们直接在桌面的projects文件夹下创建新项目。在命令行输入：vue init webpack-simple pizza-app 然后cd pizza-app, 安装cnpm,最后运行。然后创建所需要的文件夹如下：2.制作导航1.来到  
转载
2024-03-28 16:47:19
70阅读
1、监听滚动事件利用VUE写一个在控制台打印当前的scrollTop,首先，在mounted钩子中给window添加一个滚动滚动监听事件，mounted(){window.addEventListener('scroll',this.handleScroll)},然后在方法中，添加这个handleScroll方法handleScroll(){varscrollTop=window.
原创
2019-02-21 10:41:17
1455阅读
插件描述：aos.js是一款页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。1.引用在html文件中引入css文件和js文件<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
&l
转载
2023-08-11 16:08:45
216阅读
iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。iScroll不仅仅是滚动。它可以处理任何需要与用户进行移动交互的元素。iScroll分为了多个版本。目前有以下版本：iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很
转载
2023-07-17 10:39:03
154阅读
