移动端导航页面html,swiper4实现移动端导航切换
本文实例为大家分享了swiper4实现移动端导航切换的具体代码,供大家参考,具体内容如下
首先导入
(这里用的是Swiper 4.0.7版本)
在写入html内容
商品分类
- 手机
- 厨具
- 数码
- 家纺
- 生鲜
- 家用电器
- 食品饮料
- 电脑/办公
- 家用日用
最后调用swiper
var myNav = new Swiper('#nav', {
spaceBetween: 10,
slidesPerView : 3,
watchSlidesProgress : true,
watchSlidesVisibility : true,
on:{
tap: function(){
myPage.slideTo( myNav.clickedIndex)
}
}
})
var myPage = new Swiper('#page',{
on:{
slideChangeTransitionStart: function(){
updateNavPosition()
}}
})
function updateNavPosition(){
$('#nav .active-nav').removeClass('active-nav');
var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
console.log(1);
if (activeNav.index()>myNav.activeIndex) {
console.log(2);
var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
myNav.slideTo(activeNav.index()-thumbsPerNav)
}
else {
console.log(3);
myNav.slideTo(activeNav.index())
}
}
}
全部代码如下:
商品分类
*{padding:0;margin:0;font-size:20px;color:#333;}
html{background:#fff;}
a{text-decoration:none;}
body{max-width:640px;margin:0 auto;position:relative;background:#ccc;overflow:hidden;}
img{width:100%;border:0;}
li{list-style:none;}
.head-top{height:36px;position:fixed;top:0;left:0;text-align:center;width:100%;line-height:36px;}
.swiper-containee{max-width:640px;}
#nav{margin-top:36px;border-bottom:1px solid #999;padding:10px;}
#nav li{text-align:center;}
.active-nav{
color:#fff;
background:#ddd !important;
}
.active-nav a{
color:#fff;
background:#ddd !important;
}
#page .swiper-slide{height:6rem;}
商品分类
- 手机
- 厨具
- 数码
- 家纺
- 生鲜
- 家用电器
- 食品饮料
- 电脑/办公
- 家用日用
var myNav = new Swiper('#nav', {
spaceBetween: 10,
slidesPerView : 3,
watchSlidesProgress : true,
watchSlidesVisibility : true,
on:{
tap: function(){
myPage.slideTo( myNav.clickedIndex)
}
}
})
var myPage = new Swiper('#page',{
on:{
slideChangeTransitionStart: function(){
updateNavPosition()
}}
})
function updateNavPosition(){
$('#nav .active-nav').removeClass('active-nav');
var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
console.log(1);
if (activeNav.index()>myNav.activeIndex) {
console.log(2);
var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
myNav.slideTo(activeNav.index()-thumbsPerNav)
}
else {
console.log(3);
myNav.slideTo(activeNav.index())
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
移动端导航页面html,swiper4实现移动端导航切换相关推荐
- 漂亮大气的html导航页面,非常大气漂亮的CSS导航栏
大气的CSS菜单 .menu5 {padding:5px 0 0 1em; margin:0; list-style:none; height:40px; position:relative; bac ...
- m3u8 video ios h5_移动端H5页面踩坑记
移动端H5页面踩坑记 移动端的样式问题 「1. 安卓 font-weight:700;以上才被认为是加粗.」 「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...
- 解决并隐藏h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条.会占用页面的高度,如何去解决这个问题呢. 方案一 页面跳转时重新定页面的高度,这样处理导航条仍然存在. 方案二 使用histor ...
- JQ----移动端h5页面通过地址调起通讯录以及高德地图、百度地图定位导航
JQ----移动端h5页面通过地址调起通讯录以及高德地图.百度地图定位导航 通讯录: 可先加meta标签 <a href="tel:13838383838" class=&q ...
- h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结
Aphorism grow in errors overview 最近在写一个 移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面 底部的 导航条 想到的实现方案: 通过 ...
- 移动端网站页面优化的关键点
随着智能手机的普及以及平板等移动端设备的应用越来越广泛,面对更多消费体的移动端设备也有更多的企业正在加快移动网站的建设,从而为企业带来更多的流量和用户.但对于很多移动端网站,人们并没有进行很好的优化, ...
- 导航菜单设计五步法——B端设计指南
www.pmcaff.com 本文为PMCAFF作者 CE大人 于社区发布 导航菜单对于用户的使用来说尤为重要,本文是我从实际工作出发,结合自身产品和过去经验对于导航进行的一次全面总结 前言 在任意一 ...
- vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- 移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
最新文章
- 【Android 逆向】ART 脱壳 ( InMemoryDexClassLoader 脱壳 | DexFile 构造函数及相关调用函数 | Android 源码中查找 native 函数 )
- Data source rejected establishment of connection, message from server: Too many connections
- _Linux系统编程—信号集操作函数
- java版DVD影碟片出租赁系统C/S模式 java电影购票系统课程设计
- Spring boot集成spring-boot-starter-data-jpa环境搭建
- Java之toString()方法详解
- 转载:Windows核心编程---空指针赋值分区
- 《码出高效 Java开发手册》第八章 单元测试 (未整理)
- 【Java数据结构】赫夫曼树
- 马哥教育20-2期27号学员的7.27上课笔记
- 第1章 《深入理解Java虚拟机:JVM高级特性与最佳实践(第3版)周志明》目录
- 邱锡鹏,这是Transformer最全综述
- 如何用计算机观看电视节目,如何将计算机显示器变成电视以观看节目
- pythonds18b20_[python]树莓派第一课之DS18B20温度传感器
- 【编程训练-考研上机模拟】综合模拟1-2019浙大上机模拟(晴神)
- curl+openssl,编译win32 兼容xp系统的静态库
- 向量范数和矩阵范数的理解
- 【音频特征】语音特征小结
- 数字三角形求最大路径
- Adobe Photoshop CS5 标准版新增功能
热门文章
- liunx上mysql源码安装mysql,搞定linux上MySQL编程(一):linux上源码安装MySQL
- 2022-2028年中国丁基橡胶行业市场深度分析及投资前景展望报告
- shap_value
- PyTorch入门学习(二):Autogard之自动求梯度
- tf.cast()数据类型转换
- LeetCode简单题之移动零
- Arm Cortex-M23 MCU,Arm Cortex-M33 MCU与RISC-V MCU技术
- H.264 Video Codec速度和质量
- 混合装置实现了24/7的能量收集和储存
- Single Shot Multibox Detection (SSD)实战(下)