使用swiper.js实现移动端tab切换

在项目中遇到的，要实现tab切换，我用的是swiper.js

官网：http://www.swiper.com.cn/api/start/new.html

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta http-equiv="x-ua-compatible" content="ie=edge">
  6   <title>首页</title>
  7   <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">
  8   <link type="text/css" rel="stylesheet" href="./css/swiper.css">
  9   <style>
 10     html,body{
 11       width: 7.5rem;
 12       padding: 0;
 13       margin: 0;
 14       height: 100%;
 15     }
 16     ul,p{
 17       margin: 0;
 18       padding: 0;
 19     }
 20     a{
 21       text-decoration: none;
 22     }
 23     .index_container{
 24       position: relative;
 25       width: 100%;
 26       height: 100%;
 27       top: 0;
 28       left: 0;
 29     }
 30     .index_content{
 31       width: 100%;
 32       min-height: 100%;
 33     }
 34     .index_con{
 35       position: relative;
 36       padding-bottom: 0.8rem;
 37     }
 38     .advertisement{
 39       height: 4.21rem;
 40       border-bottom: 1px solid #d4cdc4;
 41     }
 42     #crec_index_jd,#crec_jd,#crec_jd li{
 43       width: auto !important;
 44       height: 4.21rem !important;
 45     }
 46     .crecweb_advertisement img{
 47       width: auto;
 48       height: 4.21rem;
 49     }
 50     .search{
 51       position: absolute;
 52       top: 0.2rem;
 53       width: 6.9rem;
 54       height: 0.56rem;
 55       margin: 0 0.3rem;
 56       z-index: 100;
 57     }
 58     .search_input{
 59       width: 5.94rem;
 60       padding: 0 0.76rem 0 0.2rem;
 61       height: 0.56rem;
 62       border-radius: 8px;
 63       border: none;
 64       float: left;
 65       font-size: 0.26rem;
 66       color: #878787;
 67       z-index: 5;
 68     }
 69     input::-webkit-input-placeholder{
 70       /* WebKit browsers */
 71       color: #878787;
 72     }
 73     input:-moz-placeholder{
 74       /* Mozilla Firefox 4 to 18 */
 75       color: #878787;
 76     }
 77     input::-moz-placeholder{
 78       /* Mozilla Firefox 19+ */
 79       color: #878787;
 80     }
 81     input:-ms-input-placeholder{
 82       /* Internet Explorer 10+ */
 83       color: #878787;
 84     }
 85     .crecweb_search_i{
 86       display: block;
 87       width: 0.28rem;
 88       height: 0.28rem;
 89       background: url("http://static.crecgec.com/crecgecweb/search.png") 50% 50%  no-repeat;
 90       background-size: 0.28rem 0.28rem;
 91       position: absolute;
 92       z-index: 10;
 93       left: 6.14rem;
 94       padding: 0.14rem;
 95     }
 96 
 97     .crecweb_notice{
 98       height: 0.26rem;
 99       line-height: 0.26rem;
100       margin: 0.2rem 0.3rem;
101       overflow: hidden;
102     }
103     .crecweb_notice_img{
104       width: 0.31rem;
105       height: 0.26rem;
106       background: url('http://static.crecgec.com/crecgecweb/notice.png') no-repeat;
107       background-size: 0.31rem 0.26rem;
108       float: left;
109     }
110     .crecweb_notice li {
111       font-size: 0.22rem;
112       position: relative;
113       list-style: none;
114     }
115     .crecweb_notice li a{
116       height: 0.26rem;
117       color: #2d2d2d;
118     }
119     .crecweb_notice li a span{
120       width: 3.9rem;
121       overflow: hidden;
122       white-space: nowrap;
123       text-overflow: ellipsis;
124       margin-left: 0.2rem;
125     }
126     .crecweb_notice li a em{
127       /*position: absolute;*/
128       /*right: 0;*/
129       font-style: normal;
130     }
131 
132 
133 
134 
135     .crecweb_tendering,.crecweb_winTheBid,.crecweb_qualifiedSupply{
136       margin: 0.3rem;
137     }
138     .tendering-table,.title{
139       height: 0.43rem;
140       line-height: 0.43rem;
141       border-bottom: 1px solid #d01e00;
142     }
143     .tendering-table ul{
144       height: 0.43rem;
145       float: left;
146     }
147     .tendering-table ul li{
148       height: 0.43rem;
149       list-style: none;
150       float: left;
151       font-size: 0.26rem;
152       padding:0 0.1rem;
153       margin-right: 0.1rem;
154       color: #000000;
155       background-color: #fff;
156       border-top-left-radius: 4px;
157       border-top-right-radius: 4px;
158     }
159     .title_show{
160       height: 0.43rem;
161       list-style: none;
162       float: left;
163       font-size: 0.26rem;
164       padding:0 0.1rem;
165       color: #fff !important;
166       background-color: #d01e00 !important;
167       border-top-left-radius: 4px;
168       border-top-right-radius: 4px;
169     }
170     .crecweb_more{
171       font-size: 0.2rem;
172       color: #000000;
173       float: right;
174     }
175     .crecweb_active{
176       color: #fff !important;
177       background-color: #d01e00 !important;
178     }
179 
180     .swiper-slide ul li,.crecweb_content ul li,.crecweb_content_gys ul li{
181       overflow: hidden;
182       list-style: none;
183       color: #2d2d2d;
184       margin-top: 0.3rem;
185       position: relative;
186       list-style-image: none;
187       background-image: url( "http://static.crecgec.com/crecgecweb/yuandian.png" );
188       background-repeat: no-repeat;
189       background-position: 2px 0.1rem;
190       padding-left: 15px;
191     }
192     .swiper-slide ul li a,.crecweb_content ul li a,.crecweb_content_gys ul li a{
193       color: #2d2d2d;
194       font-size: 0.22rem;
195       float: left;
196     }
197     .swiper-slide ul li:first-child,.crecweb_content ul li:first-child,.crecweb_content_gys ul li:first-child{
198       margin-top: 0.2rem;
199     }
200     .swiper-slide ul li span,.crecweb_content ul li span{
201       display: block;
202       height: auto;
203       /*max-height: 0.6rem;*/
204       font-size: 0.22rem;
205       overflow: hidden;
206     }
207     .crecweb_content_gys ul li span{
208       width: 4.8rem;
209       overflow: hidden;
210       white-space: nowrap;
211       text-overflow: ellipsis;
212       float: left;
213     }
214     .crecweb_content_gys ul li em{
215       position: absolute;
216       right: 0;
217       font-style: normal;
218     }
219     .swiper-slide ul li em,.crecweb_content ul li em{
220       font-size: 0.18rem;
221       position: absolute;
222       right: 0;
223       bottom: 0;
224       font-style: normal;
225     }
226 
227 
228 
229     .crecweb_footer{
230       display: flex;
231       width: 100%;
232       background-color: #e5e5e5;
233       position: relative;
234       clear: both;
235       margin-top: -0.8rem;
236     }
237     .footer_con_line{
238       flex: 1;
239       position: relative;
240       border-bottom: 1px solid #c6c6c6;
241       top: -0.38rem;
242     }
243     .footer_con_text{
244       padding: 0 0.17rem;
245       font-size: 0.2rem;
246       height: 0.2rem;
247       line-height: 0.2rem;
248       color: #a9a7a7;
249       margin: 0.3rem 0;
250     }
251 
252     .crecweb_publicDiv{
253       width: 100%;
254       height: 0.2rem;
255       background-color: #e5e5e5;
256     }
257 
258     .crecgecweb_loading{
259       position:fixed;
260       width: 100%;
261       height: 100%;
262       z-index:999;
263       background-color: rgba(229,229,229,1);
264     }
265     .crecgecweb_loading img{
266       position: absolute; left: 50%; top: 50%;
267       transform: translate(-50%, -50%);
268     }
269   </style>
270 </head>
271 <body>
272 <script>
273   setSize()
274 
275   window.addEventListener('resize', () => {
276     setSize()
277   }, false)
278 
279 
280   function setSize() {
281     //       设置字体
282     var deviceWidth = document.documentElement.clientWidth;
283     if (deviceWidth < 320) {
284       deviceWidth = 320
285     }
286     if(deviceWidth > 750) {
287       deviceWidth = 750
288     }
289     document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
290   }
291 </script>
292 
293 <div class="index_container">
294   <div class="index_content">
295       <!--招标公告、竞争性谈判、竞价采购、询价书 start-->
296       <div class="crecweb_tendering" >
297         <div class="tendering-table">
298           <ul>
299             <li class="crecweb_active">招标公告</li>
300             <li>竞争性谈判</li>
301             <li>竞价采购</li>
302             <li>询价书</li>
303           </ul>
304           <!--<a class="crecweb_more">更多></a>-->
305         </div>
306         <div class="swiper-container">
307           <div class="swiper-wrapper">
308             <div class="swiper-slide crecweb_content_sub">
309               <ul>
310                 <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=8"></script>
311               </ul>
312             </div>
313             <div class="swiper-slide crecweb_content_sub">
314               <ul>
315                 <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=9"></script>
316               </ul>
317             </div>
318             <div class="swiper-slide crecweb_content_sub">
319               <ul>
320                 <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=56"></script>
321               </ul>
322             </div>
323             <div class="swiper-slide crecweb_content_sub">
324               <ul>
325                 <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=55"></script>
326               </ul>
327             </div>
328           </div>
329         </div>
330       </div>
331       <!--招标公告、竞争性谈判、竞价采购、询价书 end-->
332   </div>
333 </div>
334 <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
335 <script type="text/javascript" src="./js/swiper.js"></script>
336 <script>
337   window.onload = function () {
338     //       table切换
339     var mySwiper = new Swiper('.swiper-container')
340     $('.tendering-table ul li').on('click', function (e) {
341       e.preventDefault();
342       //得到当前索引
343       var i = $(this).index();
344       $('.tendering-table ul li').removeClass('crecweb_active').eq(i).addClass('crecweb_active');
345       mySwiper.slideTo(i, 1000, false);
346     });
        //这块是调用 slideChange方法，当内容左右移动的时候，tab页也相应切换

347     mySwiper.on('slideChange', function () {
348       $('.tendering-table ul li').removeClass('crecweb_active').eq(this.activeIndex).addClass('crecweb_active');
349     })
350 
351 
352     var maxWidth = 36
353     $(".crecweb_content_sub ul li").each(function () {
354 
355       if($(this).find('span').text().trim().length > maxWidth) {
356         $(this).find('span').text($(this).find('span').text().trim().substring(0, maxWidth))
357         $(this).find('span').text( $(this).find('span').text() + '...')
358       }
359       if($(this).find('span').text().trim().length > 21) {
360         $(this).find('span').css({'height':'0.72rem'})
361       }
362     })
363 
364   }
365 
366 </script>
367 </body>
368 </html>

 

 

slideChange
posted @ 2018-06-19 09:16  zhaobao1830  阅读(1004)  评论(0)  编辑  收藏  举报