最近利用vue第三方UI MuseUI开发webapp，然后在导航栏这里出现了问题，我需要在导航栏上的几个路由上显示底部导航栏，在其他路由上不显示，就这个问题，MuseUI的底部导航栏直接加载在app.vue里面，会每个页面都有导航栏，所以这种方式不可行，后来我真的使出了浑身解数，去MuseUI作者GitHub上面提问，无果，去segmentfault上面提问，无果，去vue官方群提问，无果，在提问之前，我都是经过一番搜索，思考的，但是这些都让我崩溃了。...
前段时间写了一个移动端的自适应滑动Vue导航栏组件，觉得有一定实用性，大家可能会用得到（当然有些大佬自己写得更好的话就没必要啦），于是前两天整理了一下，目前已经发布到npm和GitHub上了，点我到npm，点我到GitHub项目 ，有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用，具体用法下面会讲到。 好了，先看看效果吧 好的，开始废话了，实习差不多3个月了，这段时间跟着导师大佬也有接触过一些项目...
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述，主要参考 Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目 2.项目呈现效果项目呈现网址：www.zhoupeng520.cn/index.html 项目中主要用了Flex布局，以及viewport相关知识，已达到适应各终端屏幕的目的 3.项目主要目录4主要代码如下 （1）App.vue <template><div id="app"><router-view class="view"></router-view><div class="nav"><router-link class="nav-item" to="...
Main.js var routeList = []; router.beforeEach((to, from, next) => {var index = -1;for(var i = 0; i < routeList.length; i++) {if(routeList[i].name == to.name) {index = i;break;}}if (index !== -1) { //如果存在路由列表，则把之后的路由都删掉routeList.splice(index + 1, routeList.length - index - 1);} else if(to.name != 登录){routeList.push({"name":to.name,"path":to.fullPath});}to.meta.routeList = route...
本文实例为大家分享了微信小程序实现MUI顶部选项卡的具体代码，供大家参考，具体内容如下 DEMO下载 效果图WXML <import src="../../template/list.wxml"/><view class="tui-tabbar-content"><view class="tui-tabbar-group"><text data-id="0" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 0 ? tui-active : }}">已获得赏金</text><text data-id="1" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 1 ? ...
Vue导航栏 用Vue写手机端的项目，经常会写底部导航栏，我这里总结一套比较方便实用的底部导航栏方法，并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果，底部的图标全是UI给的选中和未选中样式的图片，根据公司要求，你也可能会用fontsize去写。（全部代码黏贴到本文的最后面了）1、首先把这些小图片放到src/assets路径下面（自动base64编码）2、在data（）里边定义一个选中对应的变量isSelect...
每一个网页项目都少不了导航栏，通过原始的方法基本上都是可以写出来的。但是要写出代码量少，冗余度低的代码就要动脑子思考一下了。最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图：首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。 先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav这个数组。数组里边存放着{title:"银行"，url:" "，...
mui内置有H5版本的透明渐变导航控件，教程参考mui官网；透明渐变导航是一种解决滚动条通顶的变通方案，相比双webview，具有更高的性能和更好的动画效果； 下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果，具体内容详情如下所示： 首先声明：由于backgroundColor的值采用的是RGBA，IE8及以下不支持，所以此效果不支持IE8及以下的浏览器 css代码 body,p,h1{margin: 0;} .module-layer{width: 100%;position: fixed;top...
实现效果：实现效果如下图所示实现原理： 什么是筋斗云效果： ?这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。 实现思路： ?鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。 ?当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。 实现代码：下面是实现代码以及详细注释，核心设置一个position为abso...
首先把天猫的导航贴出来，里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。分析： 1、图标的获取 进入阿里巴巴矢量图标库，网址 http://www.iconfont.cn。 点击官方图标库，选择天猫图标库，选中放入购物车。点击添加至项目，点击创建新项目按钮，创建tianmao项目，点击确定。此时会有查看在线链接和下载至本地两种方式，我选择第一种，因为后期如果要添加小图标的话，只需要重新生成在线链接，然后更新link即可复制链...
本文实例讲述了jQuery实现的粘性滚动导航栏效果。分享给大家供大家参考，具体如下： 粘性滚动是当导航在滚动过程中会占粘于浏览器上，达到方便网站页面浏览的效果，也是一种用户体验，下面我们看一下是怎么实现的： jQuery的 smint插件，也是一个导航菜单固定插件。当页滚动时，导航菜单会固定在顶部；当点击菜单时，页面会平滑的滚动到对应的区域。 兼容性 由于 smint 使用了 position: fixed，所以它不兼容 IE6。适用浏览器：IE8...
本文实例为大家分享了js实现滑动导航栏效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no"> <script src="node_modules/jquery/jquery.js"></script><style>*{margin: 0;padding: 0;}.navScroll{position: relative;}#overflow{ width: 100%;height: 30p...
本文实例讲述了jQuery实现导航栏头部菜单项点击后变换颜色的方法。分享给大家供大家参考，具体如下： 实现效果如下:话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>a{text-decoration: none;color: black;}#menu{width: 100%;height: 20px;background: gainsboro;}ul li{list-style: none;float: left;padding-left: 20px;background-color: whitesmoke;}.active ...
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享，上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>js滚动到指定位置导航栏固定顶部</title><style type="text/css">body{height: 2500px; margin: 0; padding: 0;}.banner{height: 250px; width: 100%; background: #e5e5e5;}.bignav{width: 100%; background: #000;}.nav{ background:#000; width: 1200px; margin: 0 auto; heigh...
本文实例为大家分享了微信小程序顶部导航栏的具体代码，供大家参考，具体内容如下 需求：顶部导航栏效果图：wxml： <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? active : }}" wx:key="unique" bindtap="navbarTap">{{item}}</text> </view> <!--首页--> <view hidden="{{currentTab!==0}}"> tab_01 </view> <!--搜索--> <view hidden="{{current...