使用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 ...
随机推荐
- The 2016 ACM-ICPC Asia Beijing Regional Contest E - What a Ridiculous Election
https://vjudge.net/contest/259447#problem/E bfs,k个限制条件以数组的额外k维呈现. #include <bits/stdc++.h> usi ...
- Maven的配置以及Eclipse的设置
配置maven仓库 先找到我们解压的maven的conf目录里面的setting.xml 然后加入我们本地仓库的位置(这里仓库所在文件夹是自定义的,比如:我把它放在了D盘根目录的一个文件夹) ecli ...
- Scala进阶之路-Spark本地模式搭建
Scala进阶之路-Spark本地模式搭建 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spark简介 1>.Spark的产生背景 传统式的Hadoop缺点主要有以下两 ...
- javascript 常用的正则表达式验证表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- $使用dom4j可解析 返回&#x等字样的 html转义字符【转】
如果以GET或POST请求某个系统返回,带有 $#x 那很有可能是axis服务器返回的. <?xml version="1.0" encoding="UTF-8&q ...
- 用jsch.jar实现SFTP上传下载删除【转】【补】
java类: 需要引用的jar: jsch-0.1.53.jar 关于jsch有篇文章关于目录的问题写得非常好:http://www.zzzyk.com/show/9f02969327434a6c.h ...
- eclipse导入项目后找不到.class文件
今天从git上clone代码到eclipse中,发现项目->右键没有java build path选项,而且src下没有包路径,都显示成文件夹. 发现项目中没有.class文件 后来发现项目-& ...
- VS设置以管理员方式运行
一直以为VS不能直接以管理员方式运行,原来它是在高级里的.
- TCP/IP详解 卷1 第十七章 TCP：传输控制协议
17.2 TCP的服务 TCP提供了一种面向连接的.可靠的字节流服务.两个使用TCP的应用在彼此交换数据之前必须先建立一个TCP连接. TCP通过下列方式来提供可靠性: 1) 应用数据被分割成TCP ...
- Eclipse文件路径
经常我们需要读取某个文件,一般情况下,在Eclipse工程中,路径为./src/....