使用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 ...
随机推荐
- Cleanup failed to process the following paths错误的解决
在使用TortoiseSVN工具执行Cleanup操作时经常出现Cleanup failed to process the following paths的错误,具体如下图: 网上搜索了一下,找到了解 ...
- webserver apache 2.2.22-7/ apache webdav / redhat 6.3
s 问题1:Failed to resolve server name for 10.24.41.161 (check DNS) / RedHat 6.3 64位系统 / apache htt ...
- Linux命令之man
man命令 用处:就是一个文档帮助手册 用法:在终端中输入man加上你想知道的命令,按Q退出man命令 示例: (我想知道pwd的用法) (我想知道ls命令的用法)
- python---redis在windows安装以及测试
手册以及下载地址http://www.runoob.com/redis/redis-install.html,以及启动和测试 启动服务端(进入项目目录下: redis-server.exe redis ...
- 在eclipse中启动项目报java.util.concurrent.ExecutionException: java.lang.OutOfMemoryError: PermGen space
在我们启动项目的时候经常会出现内存溢出这个错误 设置一下内存就ok 错误信息 java.util.concurrent.ExecutionException: java.lang.OutOfMemo ...
- 震惊！最全PyCharm教程
PyCharm PyCharm是一个用于计算机编程的集成开发环境(IDE),主要用于Python语言开发,由捷克公司JetBrains开发,提供代码分析.图形化调试器,集成测试器.集成版本控制系统(V ...
- Spring触发器触发2次问题【转】
触发2遍任务对大多数程序而言,都会造成 数据重复 和 资源浪费. 我们在写spring触发器的timetrigger.xml配置文件的时候, 千万不要在Spring的总配置文件applicationC ...
- CentOS6.8下安装xz命令
我们有时候会下载到.xz结尾的压缩文件,这时候需要用到xz命令来解压这类文件,而当我们想要用yum -y install xz时,又没有关于xz的安装包,因此就找到一个xz的编译安装包进行编译安装. ...
- 【1】【JUC】JDK1.8源码分析之ArrayBlockingQueue，LinkedBlockingQueue
概要: ArrayBlockingQueue的内部是通过一个可重入锁ReentrantLock和两个Condition条件对象来实现阻塞 注意这两个Condition即ReentrantLock的Co ...
- js加减法运算多出很多小数点
链接:http://www.jb51.net/article/73043.htm 解决方法:解决这种问题两种方法,第一种就是利用JavaScript 的toFixed(n) 方法,直接获取N 位小数, ...