使用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 ...
随机推荐
- Python基础学习（五）
一.使用模块 已经了解了什么是模块,模块就是一个个文件的体,我们可以做不同的文件中引入各个模块文件,当然如果模块有冲突,还可以给模块文件的上层建立一个目录简称包,包名只能唯一,不能重名. 另外,一旦建 ...
- 2018.7中石油个人赛第4场(D-Transit Tree Path)-最短路算法
6690: Transit Tree Path 时间限制: 1 Sec 内存限制: 128 MB提交: 472 解决: 132[提交] [状态] [讨论版] [命题人:admin] 题目描述 Yo ...
- linux chkconfig添加开机启动服务
--add:增加所指定的系统服务,让chkconfig指令得以管理它,并同时在系统启动的叙述文件内增加相关数据: --del:删除所指定的系统服务,不再由chkconfig指令管理,并同时在系统启动的 ...
- 教你如何用Meterpreter渗透Win系统
在这篇文章中,我们将跟大家介绍如何使用Meterpreter来收集目标Windows系统中的信息,获取用户凭证,创建我们自己的账号,启用远程桌面,进行屏幕截图,以及获取用户键盘记录等等. 相关Payl ...
- tp3 save操作小bug误区
$china_area->save(['is_del' => 1,'updatetime' => time()]); SHOW COLUMNS FROM `tf_china_area ...
- CodeForces701E DFS
http://codeforces.com/problemset/problem/701/E 一个显而易见的方法是考虑点的贡献,一次dfs记录到所有根节点不考虑匹配的答案,再一次dfs反向推出答案 # ...
- go 练习
1.判断 101-200 之间有多少个素数,并输出所有素数 定义:为在大于1的自然数中,除了1和它本身以外不再有其他因数的数称为质数. package main import ( "fmt& ...
- Windows安装nginx服务
1.测试版本 nginx版本:nginx-1.10.2:windows版本:win10 2.下载winsw. 当前最新版本为:winsw-2.0.1-bin.exe.下载地址:http://repo. ...
- logstash收集IIS日志
匹配字段 %{TIMESTAMP_ISO8601:log_timestamp} (%{WORD:s-sitename}|-) (%{IPORHOST:s-ip}|-) (%{WORD:cs-metho ...
- JavaSE学习总结（六）——接口、抽象类、内部类
一.不需要实例化的原因 看一个示例: package com.zhangguo.chapter5.s1; /**动物园*/ public class Zoo { public static void ...