weui+swiper 滑動底部導航欄切換

zzig發表於2017-04-25
UI

檢視  https://blog.csdn.net/qq_29598161/article/details/78430321

<!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>
        <!-- 引入 WeUI -->
        <link rel="stylesheet" href="weui/css/weui.min.css"/>
        <!-- 引入 swiper -->
        <link rel="stylesheet" href="weui/css/swiper-3.4.2.min.css">

        <!-- 引入 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:;" 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> 
    <!-- 引入 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/

相關文章