使用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 ...
随机推荐
- Failed to load because no supported source was found
Uncaught (in promise) DOMException: Failed to load because no supported source was found? 等待解决:
- CodeForces892E 可撤销并查集/最小生成树
http://codeforces.com/problemset/problem/892/E 题意:给出一个 n 个点 m 条边的无向图,每条边有边权,共 Q 次询问,每次给出 ki 条边,问这些边 ...
- Linux发行版Debian操作系统破译密码
Linux发行版Debian操作系统破译密码 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 其实玩过Linux的小伙伴,对破解服务器密码都应该有所了解,典型的两个代表,我觉得一个是 ...
- ElasticSearch 例子
ElasticSearch是一个接近实时的搜索平台,它利用Lucese进行文档索引. 本文会写个可以运行的简单例子,方便大家上手,日后深入了解. 需要引入maven依赖 <dependency& ...
- centos7环境下安装mysql5.6-----解压安装包的方法
参考连接:https://blog.csdn.net/qq_17776287/article/details/53536761 linux下有很多服务,如何查看服务是否启动,以mysql为例子 使用命 ...
- HDU - 4370 0 or 1
0 or 1 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- Kruskal算法：最小生成树
//Kruskal算法按照边的权值从小到大查看一遍,如果不产生圈(重边等也算在内),就把当前这条表加入到生成树中. //如果判断是否产生圈.假设现在要把连接顶点u和顶点v的边e加入生成树中.如果加入之 ...
- 如何使用无线连接来使Android调试手机
进入Android Studio.(我的是2.2版本) File->Setting->Plugins Browse repositories... 搜索 ADB WIFI 并安装 重启An ...
- 微信公众号绑定服务器 Flask版
python 代码 from flask import Flask, request from flask_cors import CORS app = Flask(__name__) app.app ...
- JavaScript遍历对象中所有元素
操作对象如下,属性名不确定: 遍历方法: var temp = new Array(); for(var i in result.datas[0]){ temp.push(result.datas[0 ...