使用swiper.js实现移动端tab切换
在项目中遇到的，要实现tab切换，我用的是swiper.js
官网：http://www.swiper.com.cn/api/start/new.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">
<link type="text/css" rel="stylesheet" href="./css/swiper.css">
<style>
html,body{
width: .5rem;
padding: ;
margin: ;
height: %;
}
ul,p{
margin: ;
padding: ;
}
a{
text-decoration: none;
}
.index_container{
position: relative;
width: %;
height: %;
top: ;
left: ;
}
.index_content{
width: %;
min-height: %;
}
.index_con{
position: relative;
padding-bottom: .8rem;
}
.advertisement{
height: .21rem;
border-bottom: 1px solid #d4cdc4;
}
#crec_index_jd,#crec_jd,#crec_jd li{
width: auto !important;
height: .21rem !important;
}
.crecweb_advertisement img{
width: auto;
height: .21rem;
}
.search{
position: absolute;
top: .2rem;
width: .9rem;
height: .56rem;
margin: .3rem;
z-index: ;
}
.search_input{
width: .94rem;
padding: .76rem .2rem;
height: .56rem;
border-radius: 8px;
border: none;
float: left;
font-size: .26rem;
color: #;
z-index: ;
}
input::-webkit-input-placeholder{
/* WebKit browsers */
color: #;
}
input:-moz-placeholder{
/* Mozilla Firefox 4 to 18 */
color: #;
}
input::-moz-placeholder{
/* Mozilla Firefox 19+ */
color: #;
}
input:-ms-input-placeholder{
/* Internet Explorer 10+ */
color: #;
}
.crecweb_search_i{
display: block;
width: .28rem;
height: .28rem;
background: url("http://static.crecgec.com/crecgecweb/search.png") % % no-repeat;
background-size: .28rem .28rem;
position: absolute;
z-index: ;
left: .14rem;
padding: .14rem;
} .crecweb_notice{
height: .26rem;
line-height: .26rem;
margin: .2rem .3rem;
overflow: hidden;
}
.crecweb_notice_img{
width: .31rem;
height: .26rem;
background: url('http://static.crecgec.com/crecgecweb/notice.png') no-repeat;
background-size: .31rem .26rem;
float: left;
}
.crecweb_notice li {
font-size: .22rem;
position: relative;
list-style: none;
}
.crecweb_notice li a{
height: .26rem;
color: #2d2d2d;
}
.crecweb_notice li a span{
width: .9rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: .2rem;
}
.crecweb_notice li a em{
/*position: absolute;*/
/*right: 0;*/
font-style: normal;
} .crecweb_tendering,.crecweb_winTheBid,.crecweb_qualifiedSupply{
margin: .3rem;
}
.tendering-table,.title{
height: .43rem;
line-height: .43rem;
border-bottom: 1px solid #d01e00;
}
.tendering-table ul{
height: .43rem;
float: left;
}
.tendering-table ul li{
height: .43rem;
list-style: none;
float: left;
font-size: .26rem;
padding: .1rem;
margin-right: .1rem;
color: #;
background-color: #fff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.title_show{
height: .43rem;
list-style: none;
float: left;
font-size: .26rem;
padding: .1rem;
color: #fff !important;
background-color: #d01e00 !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.crecweb_more{
font-size: .2rem;
color: #;
float: right;
}
.crecweb_active{
color: #fff !important;
background-color: #d01e00 !important;
} .swiper-slide ul li,.crecweb_content ul li,.crecweb_content_gys ul li{
overflow: hidden;
list-style: none;
color: #2d2d2d;
margin-top: .3rem;
position: relative;
list-style-image: none;
background-image: url( "http://static.crecgec.com/crecgecweb/yuandian.png" );
background-repeat: no-repeat;
background-position: 2px .1rem;
padding-left: 15px;
}
.swiper-slide ul li a,.crecweb_content ul li a,.crecweb_content_gys ul li a{
color: #2d2d2d;
font-size: .22rem;
float: left;
}
.swiper-slide ul li:first-child,.crecweb_content ul li:first-child,.crecweb_content_gys ul li:first-child{
margin-top: .2rem;
}
.swiper-slide ul li span,.crecweb_content ul li span{
display: block;
height: auto;
/*max-height: 0.6rem;*/
font-size: .22rem;
overflow: hidden;
}
.crecweb_content_gys ul li span{
width: .8rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.crecweb_content_gys ul li em{
position: absolute;
right: ;
font-style: normal;
}
.swiper-slide ul li em,.crecweb_content ul li em{
font-size: .18rem;
position: absolute;
right: ;
bottom: ;
font-style: normal;
} .crecweb_footer{
display: flex;
width: %;
background-color: #e5e5e5;
position: relative;
clear: both;
margin-top: -.8rem;
}
.footer_con_line{
flex: ;
position: relative;
border-bottom: 1px solid #c6c6c6;
top: -.38rem;
}
.footer_con_text{
padding: .17rem;
font-size: .2rem;
height: .2rem;
line-height: .2rem;
color: #a9a7a7;
margin: .3rem ;
} .crecweb_publicDiv{
width: %;
height: .2rem;
background-color: #e5e5e5;
} .crecgecweb_loading{
position:fixed;
width: %;
height: %;
z-index:;
background-color: rgba(,,,);
}
.crecgecweb_loading img{
position: absolute; left: %; top: %;
transform: translate(-%, -%);
}
</style>
</head>
<body>
<script>
setSize() window.addEventListener('resize', () => {
setSize()
}, false) function setSize() {
// 设置字体
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth < ) {
deviceWidth =
}
if(deviceWidth > ) {
deviceWidth =
}
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
}
</script> <div class="index_container">
<div class="index_content">
<!--招标公告、竞争性谈判、竞价采购、询价书 start-->
<div class="crecweb_tendering" >
<div class="tendering-table">
<ul>
<li class="crecweb_active">招标公告</li>
<li>竞争性谈判</li>
<li>竞价采购</li>
<li>询价书</li>
</ul>
<!--<a class="crecweb_more">更多></a>-->
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide crecweb_content_sub">
<ul>
<script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=8"></script>
</ul>
</div>
<div class="swiper-slide crecweb_content_sub">
<ul>
<script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=9"></script>
</ul>
</div>
<div class="swiper-slide crecweb_content_sub">
<ul>
<script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=56"></script>
</ul>
</div>
<div class="swiper-slide crecweb_content_sub">
<ul>
<script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=55"></script>
</ul>
</div>
</div>
</div>
</div>
<!--招标公告、竞争性谈判、竞价采购、询价书 end-->
</div>
</div>
<script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="./js/swiper.js"></script>
<script>
window.onload = function () {
// table切换
var mySwiper = new Swiper('.swiper-container')
$('.tendering-table ul li').on('click', function (e) {
e.preventDefault();
//得到当前索引
var i = $(this).index();
$('.tendering-table ul li').removeClass('crecweb_active').eq(i).addClass('crecweb_active');
mySwiper.slideTo(i, , false);
});
//这块是调用 slideChange方法，当内容左右移动的时候，tab页也相应切换
mySwiper.on('slideChange', function () {
$('.tendering-table ul li').removeClass('crecweb_active').eq(this.activeIndex).addClass('crecweb_active');
}) var maxWidth =
$(".crecweb_content_sub ul li").each(function () { if($(this).find('span').text().trim().length > maxWidth) {
$(this).find('span').text($(this).find('span').text().trim().substring(, maxWidth))
$(this).find('span').text( $(this).find('span').text() + '...')
}
if($(this).find('span').text().trim().length > ) {
$(this).find('span').css({'height':'0.72rem'})
}
}) } </script>
</body>
</html>
slideChange
使用swiper.js实现移动端tab切换的更多相关文章
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
- js或者jq的tab切换
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- js中常用的Tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端tab切换时下划线的滑动效果
1.当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果. <!DOCTYPE html><html lang="en" ...
- 小程序的tab切换事件
index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...
- 教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模 ...
- html+js(swiper.js)+css左右滑动切换页面效果，适配移动端
demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
随机推荐
- html中空格字符实体整理
摘要 浏览器总是会截短 HTML 页面中的空格.如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个.如需在页面中增加空格的数量,您需要使用 字符实体. 本篇就单介绍空格的字 ...
- 原生JS和JQ窗口定位属性对照表
位置 javascript jquery 兼容性 窗口位置离屏幕左偏移 var leftPos = (typeof window.screenLeft == "number") ? ...
- Makefile ------ $@ $^ %< 使用
一步一步理解 1.源程序的编译 在Linux下面,如果要编译一个C语言源程序,我们要使用GNU的gcc编译器. 下面我们以一个实例来说明如何使用gcc编译器. 假设我们有下面一个非常简单的源程序(he ...
- linux反向删除文件
Linux反选删除文件 最简单的方法是 # shopt -s extglob (打开extglob模式) # rm -fr !(file1) 如果是多个要排除的,可以这样: # rm -r ...
- location的三种连接方式和区别
location.href是一个属性,要这样使用:location.href='http://www.example.com'而location.assign('http://www.example. ...
- Linux就该这么学--第五期 学习笔记
第一节:基础 <Linux就该这么学>第二期视频 Linux就该这么学第5期第二节: ------------你的价值:你对公司做出的共享和你的不可替代性------------瑞尔系统R ...
- Java_Mybatis_注解代理写法
Mybatis的开发方式其实有3种: 1. 原始Dao开发(就是把mapper接口.映射文件和实现类都一并开发) 2. xml代理(就是只实现mapper接口和映射文件) 3.注解代理(就是只实现ma ...
- eclipse如何加入第三方jar包
1.项目右键选择“properties” 2.选Java Build Path 3.选Libraries 4.选add JRAS jar包下载平台:http://www.mvnrepository.c ...
- python自动化运维之路~DAY5
python自动化运维之路~DAY5 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块的分类 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数 ...
- 面向对象【day08】：问答式面相对象（四）
本节内容 1.什么是面向对象编程 2.什么是市类?什么是对象?又有什么关系? 3.什么时候适用面向对象? 4.self就是调用当前方法的对象 5.封装.继承.多态 6.字段方法 1.什么是面向对象编程 ...