分类：导航

2020
12-14

swiper实现导航滚动效果

swiper实现导航滚动效果 本文实例为大家分享了swiper实现导航滚动效果的具体代码，供大家参考，具体内容如下1.需求：点击导航科目，选中元素自动往前滑动处于中间位置，tab切换<divclass="swiper-containercity-column-course"><ulclass="swiper-wrapper"><liclass="swiper-slideon"><h4>推荐</h4><p>Recommend</p></li><liclass="swiper-slide"><h4>英语培训</h4><p>Englishtraining</p></li><liclass="swiper-sli... 继续阅读 >
2020
12-02

微信小程序实现电影App导航和轮播

微信小程序实现电影App导航和轮播 本文实例为大家分享了微信小程序实现电影App导航和轮播的具体代码，供大家参考，具体内容如下最终的目的：底部：我们要搞好这样的底部要在app.json填写tabBar在pages下面填写tabBar"tabBar":{"color":"#dddddd",//默然的颜色"selectedColor":"#3cc51f",//被点击后更改的颜色"borderStyle":"black","backgroundColor":"#2B2B2B","list":[{"pagePath":"pages/movie/movie","iconPath":"/pages/assets/img/dy-1.png",/... 继续阅读 >
2020
11-19

微信小程序实现自定义底部导航

微信小程序实现自定义底部导航 本文实例为大家分享了微信小程序实现底部导航的具体代码，供大家参考，具体内容如下建一个tabbar.wxml组件<templatename="tabBar"><viewclass="tab-bar"style="color:{{tabBar.color}};background:{{tabBar.backgroundColor}};{{tabBar.position=='top'?'top:0':'bottom:0'}};"><blockwx:for="{{tabBar.list}}"wx:key="pagePath"><navigatorhover-class="none"url="{{item.pagePath}}"open-type="redirect... 继续阅读 >
2020
10-08

Vue 解决父组件跳转子路由后当前导航active样式消失问题

Vue 解决父组件跳转子路由后当前导航active样式消失问题 举个栗子，导航栏如下图，当前新闻资讯的路由是：localhost:8083/#/new，导航栏样式如图所示：随便挑个新闻点击后会跳转到子路由：localhost:8083/#/new/newDetail，这时候新闻资讯的主路由style样式出现消失的问题，如下图：style代码：.router-link-exact-active{color:#8fc526!important;border-top:4pxsolid#8fc526!important;}router.js代码：{path:'/new',name:'new',component:news,children:[{pat... 继续阅读 >
2020
10-08

jQuery 实现扁平式小清新导航

效果图1.html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>index</title><linkrel="stylesheet"href="css/style.css"rel="externalnofollow"></head><body><!--导航nav--><ulid="navigation"><liclass="home"><ahref=""><span>Home</span></a></li><liclass="about"><ahref=""><span>About</span></a></li><liclass="search"><ahref=""><span>Search</span></a></li><liclass="ph... 继续阅读 >