檢視 https://blog.csdn.net/qq_29598161/article/details/78430321
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>weui+swiper</title>
<!-- 引入 WeUI -->
<link rel="stylesheet" href="weui/css/weui.min.css" target="_blank" rel="external nofollow" />
<!-- 引入 swiper -->
<link rel="stylesheet" href="weui/css/swiper-3.4.2.min.css" target="_blank" rel="external nofollow" >
<!-- 引入 zepto -->
<script src="weui/js/zepto.min.js"></script>
</head>
<body>
<style>
html{
height:100%;
}
body{
max-width:800px;
margin: 0 auto;
height:100%;
border-right: 1px solid #c5c5c5;
border-left: 1px solid #c5c5c5;
box-shadow:2px 2px 3px #aaaaaa;
}
.img1{
color: #a0b95d;
font-size: 15px;
text-align: center;
}
.img2{
color: #13aed6;
font-size: 12px;
text-align: center;
}
.img3{
color: #63d9f7;
font-size: 12px;
text-align: center;
}
</style>
<div class="weui-tab" id="weuitab" ><!--繼承body 、height100%-->
<div class="swiper-container weui-tab__panel" ><!--Swiper的容器-->
<div class="swiper-wrapper" ><!--觸控的對象-->
<!----------------weui-panel1----首頁-------------------->
<div class="swiper-slide" ><!--切換的滑塊-->
<div class="weui-panel" id="weui-panel1">
<div class="weui-panel__hd">
<h2 class="page__title">p1</h2>
</div>
</div>
</div>
<!----------------weui-panel2-------p2----------------->
<div class="swiper-slide"><!--切換的滑塊-->
<div class="weui-panel" id="weui-panel2" >
<!--weui-panel__hd--->
<div class="weui-panel__hd">
<h2 class="page__title">p2</h2>
</div>
</div>
</div>
<!----------------weui-panel3-------p3----------------->
<div class="swiper-slide"><!--切換的滑塊-->
<div class="weui-panel" id="weui-panel3">
<div class="weui-panel__hd">
<h2 class="page__title">p3</h2>
</div>
</div>
</div>
</div>
</div>
<!----------------weui-tabbar------------------------>
<div class="weui-tabbar swiper-no-swiping">
<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-tabbar__item weui-bar__item_on" id="tabbar1">
<img src="首頁.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">首頁</p>
</a>
<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-tabbar__item" id="tabbar2">
<img src="p1.png" alt="" class="weui-tabbar__icon" >
<p class="weui-tabbar__label">p1</p>
</a>
<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="weui-tabbar__item" id="tabbar3">
<img src="p2.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">p2</p>
</a>
</div>
<script type="text/javascript">
$(function(){
$('.weui-tabbar__item').on('click', function () {
$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
//點選底部導航圖示轉到指定頁面
mySwiper2.slideTo($(this).attr('id').charAt(6)-1,false);
});
});
</script>
</div>
<!-- 引入 swiper -->
<script src="weui/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript">
//頁面導航js
var mySwiper = new Swiper('.swiper-container', {
//autoplay: 5000,//可選選項，自動滑動
touchRatio : 0.5,
onSlideChangeStart: function(swiper){
switch(swiper.activeIndex){//滑動頁面時底部導航文字也跟着激活
case 0: $("#tabbar1").trigger("click");break;
case 1: $("#tabbar2").trigger("click");break;
case 2: $("#tabbar3").trigger("click");break;
}
//alert(swiper.activeIndex);
},
})
</script>
swiper可以嵌套在導航頁面中,示範網址 http://www.wodeditu.com/
![軟體測試——Web測試基礎理論知識思維導圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)