weui+swiper 滑动底部导航栏切换

来源：互联网发布：mac视频截图快捷键编辑：程序博客网时间：2024/04/29 19:57

<!DOCTYPE html>
<html lang="ch">
<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>

<link rel="stylesheet" href="weui/css/weui.min.css"/>

<link rel="stylesheet" href="weui/css/swiper-3.4.2.min.css">

</div>

</div>
</div>


<div class="swiper-slide">
<div class="weui-panel" id="weui-panel2" >

<div class="weui-panel__hd">
<h2 class="page__title">p2</h2>
</div>
</div>
</div>


<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>


<div class="weui-tabbar swiper-no-swiping">
<a href="javascript:;" 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:;" 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:;" 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>

<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/

0 0