weui+swiper 滑动底部导航栏切换 类似微信切换效果

最新推荐文章于 2024-08-06 14:28:38 发布
最新推荐文章于 2024-08-06 14:28:38 发布
阅读量8.4k 收藏 6
点赞数
文章标签： html weui swiper 微信 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29598161/article/details/78430321
版权

###之前的源码可能不完整，这是完整的

###使用的是
WeUI v1.1.1 (https://github.com/weui/weui)
Swiper 3.4.2 ( http://www.idangero.us/swiper/)

####版本不同，效果可能不一样

####使用weui 时 看官方文档 有多页面切换和底部导航 缺找不实现的方法 然后就用swiper 切换实现


<!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 demo</title>
        <!-- 引入 WeUI -->
        <link rel="stylesheet" href="css/weui.min.css"/>
        <!-- 引入 swiper -->
        <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
        <link rel="stylesheet" href="css/animate.min.css">
        <script src="js/zepto.min.js"></script> 

    </head>
<body>
<style>
html{
height:100%;
}  
body{   
	max-width:550px;   /*pc最大宽度*/
	margin: 0 auto;
	height:100%;
	border-right: 1px solid #c5c5c5;
	border-left: 1px solid #c5c5c5;
	box-shadow:2px 2px 3px #aaaaaa;
}


/*im1 -- img3 是控制 图片上弹出 文字的样式*/
.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-container2 weui-tab__panel" ><!--Swiper的容器-->
       <div class="swiper-wrapper" ><!--触控的对象--> 
          
          <!----------------weui-panel1----首页-------------------->          
          <div class="swiper-slide" ><!--切换的滑块-->
            <div class="weui-panel"  id="weui-panel1">
                        <!--logo-->
                        <div class="page__hd" style=""><!--logo标题-->
                                <h1 class="page__title">
                                    weui+swiper
                                    <a  style="position:absolute; right:5px; top:10px;" href="html/Login.html" class="weui-btn weui-btn_mini weui-btn_default">登录</a>
                                </h1> 
                        </div>
                        
                        <!--分割线-->
                        <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="99%" color=#987cb9 SIZE=3>
                        
                        <!--Swiper-->
                        <div class="swiper-container swiper-container-horizontal"><!--Swiper的容器-->
                            <div class="swiper-wrapper"><!--触控的对象-->    
                                <div class="swiper-slide"><!--切换的滑块-->
                                    <div class="swiper-zoom-container">	<!--zoom调焦的容器-->			
                                    <img data-src="image/img1.png" class="swiper-lazy swiper-zoom-container ">
                                    <p class="ani img1" swiper-animate-effect="zoomInUp"     swiper-animate-delay="0.0s" style=" position:absolute; top:10px;  right:4%; ">图片1</p> 
                                    <p class="ani img1" swiper-animate-effect="rollIn"       swiper-animate-delay="0.6s" style=" position:absolute; top:75%;   left:10%;">图片1</p> 
                                    <p class="ani img1" swiper-animate-effect="rollIn"       swiper-animate-delay="1.2s" style=" position:absolute; top:24%;   left:16%;">图片1</p> 
                                    <div class="swiper-lazy-preloader"></div>
                                    </div>
                               </div>
                                <div class="swiper-slide">
                                    <div class="swiper-zoom-container">	
                                    <img data-src="image/img2.png" class="swiper-lazy swiper-zoom-container " >
                                    <p class="ani img2" swiper-animate-effect="flash" style=" position:absolute; top:45%; left:60%;">图片2</p> 
                                    <div class="swiper-lazy-preloader"></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="swiper-zoom-container">	
                                    <img data-src="image/img3.png" class="swiper-lazy swiper-zoom-container">
                                    <p class="ani img3" swiper-animate-effect="bounceInDown" swiper-animate-delay="0.6s" style=" position:absolute; top:46%; left:80%;">图片3</p> 
                                    <p class="ani img3" swiper-animate-effect="bounceInDown"  style=" position:absolute; top:10%; left:68%;">图片3</p> 
                                    <div class="swiper-lazy-preloader"></div>
                                    </div>
                               </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        
                        
                        
                        <!-- 使用weui九宫格样式-->
                        <div class="weui-grids">
                             <a href="html/NowMap/loading.html" class="weui-grid">
                                <div class="weui-grid__icon">
                                    <img src="icon/当前.png" alt="">
                                </div>
                                <p class="weui-grid__label">
                                    当前
                                </p>
                             </a>
                             <a href="upload/upload.html" class="weui-grid">
                                <div class="weui-grid__icon">
                                    <img src="icon/校园.png" alt="">
                                </div>
                                <p class="weui-grid__label">
                                    校园
                                </p>
                             </a>
                             <a href="javascript:;" class="weui-grid">
                                <div class="weui-grid__icon">
                                    <img src="icon/景点.png" alt="">
                                </div>
                                <p class="weui-grid__label">
                                    景点
                                </p>
                             </a>
                             <a href="map/upload/upload.html" class="weui-grid">
                                <div class="weui-grid__icon">
                                    <img src="icon/制作.png" alt="">
                                </div>
                                <p class="weui-grid__label">
                                    制作 </p>
                             </a>
                             <a href="html/about/about.html" class="weui-grid">
                                <div class="weui-grid__icon">
                                    <img src="icon/建议.png" alt="">
                                </div>
                                <p class="weui-grid__label">
                                    建议
                                </p>
                              </a>
                             <a href="jqmhome.html" class="weui-grid">
                                <div class="weui-grid__icon">
                                    <img src="icon/更多.png" alt="">
                                </div>
                                <p class="weui-grid__label">
                                   更多
                                </p>
                              </a>
                        </div>
                        
                        <!--cnzz统计代码样式隐藏-->
                        <div class="cnzz" style="display:none;">       
                        </div>
            </div>
          </div>
          
          <!----------------weui-panel2-------地图----------------->
          <div class="swiper-slide"><!--切换的滑块-->
            <div class="weui-panel" id="weui-panel2">
                        <!--weui-panel__hd--->
                        <div class="weui-panel__hd">
                        <h2 class="page__title">第二页</h2>
                        </div>
                        <!--gaode-在swiper-->
                        <div class="swiper-container3 swiper-container-horizontal"><!--Swiper的容器-->
                            <div class="swiper-wrapper"><!--触控的对象-->  
                             
                        		<div id='container' class="swiper-zoom-container " style="height:250px; width:100%; "></div>
                            
                            </div>
                        </div>
                        <!--weui-panel__hd-->
                        <div class="weui-panel__hd">
                        列表:
                        </div>
                        <!--weui-panel__bd-->
                        <div class="weui-panel__bd">
                            <a href="" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd">
                                    <img class="weui-media-box__thumb" src="icon/地图小图.png" alt="">
                                </div>
                                <div class="weui-media-box__bd">
                                    <h4 class="weui-media-box__title">标题</h4>
                                    <p class="weui-media-box__desc">
                                    内容内容内容内容内容内容内容内容
                                    内容内容内容内容内容内容内容内容
                                    </p>
                                </div>
                                <!--其他信息-->
                                <div style="position:absolute; bottom:-3px; right:0px; ">
                                    <ul class="weui-media-box__info">
                                        <li class="weui-media-box__info__meta">作者</li>
                                        <li class="weui-media-box__info__meta">2017.11.2</li>
                                        <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">无</li>
                                    </ul>
                                </div>
                            </a>
                            
                            <a href="" class="weui-media-box weui-media-box_appmsg">
                                <div class="weui-media-box__hd">
                                	<img class="weui-media-box__thumb" src="icon/地图小图.png" alt="">                                </div>
                                <div class="weui-media-box__bd">
                                    <h4 class="weui-media-box__title">标题</h4>
                                    <p class="weui-media-box__desc">
                                    内容内容内容内容内容内容内容内容
                                    内容内容内容内容内容内容内容内容
                                    </p>
                                </div>
                                <!--其他信息-->
                                <div style="position:absolute; bottom:-3px; right:0px; ">
                                    <ul class="weui-media-box__info">
                                        <li class="weui-media-box__info__meta">作者</li>
                                        <li class="weui-media-box__info__meta">2017.11.2</li>
                                        <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">无</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                        <!--weui-panel__ft-->
                        <div class="weui-panel__ft">
                            <a href="" class="weui-cell weui-cell_access weui-cell_link">
                                <div class="weui-cell__bd">查看更多</div>
                                <span class="weui-cell__ft"></span>
                            </a>    
                        </div>
            </div>             
          </div>
          
          <!----------------weui-panel2-------地图----------------->
          <div class="swiper-slide"><!--切换的滑块-->
            <div class="weui-panel" id="weui-panel3" >
              <!---------------------------------------------------->
             	     
					
					<div style="height:25px">
                    </div>
                    <div align="center">
                    <img src="icon/头像.png" width="25%" height="25%"  />
                    </div>
                    <div align="center">
                    <a  style=" " href="html/Login.html" class="weui-btn weui-btn_mini weui-btn_default">登录</a>
                    <a  style=" " href="html/Register.html" class="weui-btn weui-btn_mini weui-btn_default">注册</a>
                    </div>
					<!---------------------------------------------------->
                    <div class="weui-media-box weui-media-box_small-appmsg">
                            <div class="weui-cells">
                                <div class="weui-panel__hd">管理</div>
                                <a class="weui-cell weui-cell_access" href="javascript:ShowWarnAlert();">
                                    <div class="weui-cell__hd"><img src="icon/上传2.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                                    <div class="weui-cell__bd weui-cell_primary">
                                        <p>上传</p>
                                    </div>
                                    <span class="weui-cell__ft"></span>
                                </a>
                                <a class="weui-cell weui-cell_access" href="javascript:ShowWarnAlert();">
                                    <div class="weui-cell__hd"><img src="icon/编辑2.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                                    <div class="weui-cell__bd weui-cell_primary">
                                        <p>编辑</p>
                                    </div>
                                    <span class="weui-cell__ft"></span>
                                </a>
                                <a class="weui-cell weui-cell_access" href="javascript:ShowWarnAlert();">
                                    <div class="weui-cell__hd"><img src="icon/收藏2.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                                    <div class="weui-cell__bd weui-cell_primary">
                                        <p>我的收藏</p>
                                    </div>
                                    <span class="weui-cell__ft"></span>
                                </a>
                            </div>
                    </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="icon/首页.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item" id="tabbar2">
            <img src="icon/地图.png" alt="" class="weui-tabbar__icon" >
            <p class="weui-tabbar__label">地图</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item" id="tabbar3">
            <img src="icon/我的.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">我的</p>
        </a>
    </div>
    <!--------------------加载图标------------------------------->
    <div id="loadingToast" style="display:none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content">注销中</p>
            </div>
    </div>
    <script>
	$("#cancellation").click( function(){document.getElementById("loadingToast").setAttribute("style","display:");});
	</script>
    <!---------------------提示------------------------------>
    <div id="warnAlert" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong id="dialogHd" class="weui-dialog__title"></strong></div>
                <div class="weui-dialog__bd" id="dialogBd" ></div>
                <div class="weui-dialog__ft">
                    <a href="javascript:HiddenWarnAlert('warnAlert');" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
                </div>
            </div>
    </div>
    <script>
    function ShowWarnAlert(str1,str2){
		
		str1="提示";
		str2="还未登陆哦！<a href='html/Login.html'>点此</a>登陆";
		document.getElementById("dialogHd").innerHTML=str1; 
		document.getElementById("dialogBd").innerHTML=str2; 
		document.getElementById("warnAlert").setAttribute("style","");
	}
	function HiddenWarnAlert(obj){
		document.getElementById("dialogHd").innerHTML=null; 
		document.getElementById("dialogBd").innerHTML=null;
		document.getElementById("warnAlert").setAttribute("style","display:none");
	}
    </script>
    <!--------------------------------------------------->
    <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,500,false);//索引编号，时间延时，onSlideChange回调函数
		});
    });
	
	</script>
</div> 
    <!-- 引入 swiper -->
     <script src="js/swiper-3.4.2.min.js"></script> 
     <script src="js/swiper.animate1.0.2.min.js"></script>
     <script type="text/javascript">
	    //首页图片js
	    var mySwiper = new Swiper('.swiper-container',{
		lazyLoading : true,//懒惰加载
		autoplay: 10000,//5s自动滑动
		autoplayDisableOnInteraction : true,//点击取消自动滑动
		zoom : true,//调焦
		loop : true,//循环
		pagination : '.swiper-pagination',//圆点分页器
		paginationClickable :true,//点击圆点切换
		paginationHide :true,//圆点自动隐藏
		lazyLoading : true,//延迟加载
		/
		onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		swiperAnimateCache(swiper); //隐藏动画元素 
		swiperAnimate(swiper); //初始化完成开始动画
		}, 
		onSlideChangeEnd: function(swiper){ 
			swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		},
		  });
		//
		//页面导航js
		var mySwiper2 = new Swiper('.swiper-container2', {
		//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);
				
		},
	   

		
		})
		
		//
		var mySwiper3 = new Swiper('.swiper-container3', {
		//autoplay: 5000,//可选选项，自动滑动
		})
		mySwiper3.lockSwipes();
	</script>
  
    
    </body>
</html>

####切换页面用jq或者zepto 给点击的底部导航图标设置class（激活），然后用Swiper自带的函数实现 页面切换
####$(this).attr(‘id’).charAt(6)-1 这步是获得索引编号，原来写的没改，这里写的太过复杂了，可以简化


    $(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,500,false);//索引编号，时间延时，onSlideChange回调函数
		});
    });

####效果大概就是截图这样了，微信风格

效果图-首页
效果图-3

####swiper可以嵌套在导航页面中
####之前做的网页 演示网址 http://wodeditu.com/

snoopy_21
关注
微信小程序中标签页切换效果是怎么做出来的
flying meng的菜鸟居
12-11 5894
于传统网页开发中的标签页切换效果不同的是，小程序的标签页切换更接近原生APP的交互体验！也就是可以通过左右滑动页面进行切换，类似于网页开发中的焦点图切换的效果。 ——这当然是通过微信小程序强大的组件和API实现的。 目前为止，笔者知道的可以“完美”实现这一功能的，有两种方式。 1、Swiper组件方式实现 如图 顶部的3个标签页标题用数字0、1、2来表示——这也代表绑定后页面的位置。当用户向左滑...
微信小程序中WeUI的使用，swiper 制作选项卡
03-29
分享者：萌神哆啦A梦，来自原文地址  首先来看下WeUI的介绍： WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题，而且和各组件的样式和微信一样，能够很好地和微信融合在一起，给用户较好的体验。 (此图片来源于网络，如有侵权，请联系删除! ) 1.引入WeUI WeUI的Github地址：WeUI下载地址 下载 weui-
微信小程序weui的使用
最新发布
on1yLX的博客
08-06 321
上图所示就是weui使用代码，这里我们随意挑选一个模块badge示例，对应的badge.wxml的代码其实就是weui的各个badge徽章标记的样式，我们直接将badge.wxml中的代码复制，粘贴到小程序项目中的新建页面test.wxml中看看。上有小程序weui的样式展示，当然我们也可以直接进weui的小程序手机上查看weui的样式，然后根据需求来选择组件的使用，但是这里都没有介绍weui具体的使用，但是example文件夹里有。直接将该文件扔进vscode里，我们就可以看到各个组件的代码。
weui+swiper 滑动底部导航栏切换
upup
04-25 8915
weui+swiper html{ height:100%; } body{ max-width:800px; margin: 0 auto; height:100%; border-right: 1px soli
UIViewController的切换方式
江湖两把刀的技术博客
08-08 1526
1.NavigationController切换UIViewController的两种方式 方法一右侧进入 1 SecondViewController* svc=[[SecondViewController alloc]init]; 2 [self.navigationController pushViewController:fvc animated:YES]; 返回到上一个
UIview之间常用视图之间的切换方式
linxiqin的博客
12-03 530
UIview之间常用视图之间的切换方式 在IOS开发中，经常遇到两个View之间互相切换，列举下各种方式，但是下面每种方式都要自己灵活运用，不一定就是进入下一个、后一个必须用“一”里面的方式。 一：进入下\后一个View A:insertSubView系列：（注意，如果你新增视图不够大，则遮不住上一层视图，即前后2个视图都存在，当然你可以做透明来查看所有，与二A对
微信小程序开发之选项卡tab(swiper)滑动切换功能实现
安海军
05-07 8546
该功能实现依赖于 微信小程序 模板容器 swiper，及其提供的属性方法；具体实现如下：上代码index.wxml&lt;!--pages/index/index.wxml--&gt; &lt;view class="page"&gt; &lt;!-- &lt;view class="layout-header"&gt;&lt;/view&gt; --&gt; &l
微信小程序实现tab和swiper切换结合效果
08-28
在微信小程序中，实现Tab（标签）和Swiper（轮播图）的切换结合效果是一项常见的功能需求，它能够提供用户友好的界面交互，让用户在不同的内容板块间轻松浏览。以下将详细介绍如何在微信小程序中实现这一效果。 ...
微信小程序日历组件（swiper可滑动的日历）
BubbleABC的博客
02-07 1990
可滑动的日历组件 根据现实需求自行调整其他 rili.wxml页面 <!--pages/rili/rili.wxml--> <view class="rili"> </view> <view class='month'> <!-- <view class='arrow' bindtap='prevMonth'>《 </view> --> <view class="shijian">
微信小程序实现tab和swiper切换结合效果viewpage+tab效果
u013125372的博客
12-04 6562
实现tab+swiper（viewpage+tab）效果的实现，tab可左右滑动，跟着页面的滑动而改变位置的实现。tab也可点击切换page
UI界面切换框架
GS的博客
07-20 2119
这个框架是基于Siki之前的UI框架进行修改的。在之前框架的基础上，进行了一些个人的修改和扩展。 下面是这个框架的架构： 修改的地方： 1 首先是扩展： 原框架： 原框架是通过一个BasePanel类做基类进行扩展，想要自定义一个面板类，就要继承BasePanel。 修改后： 将BasePanel替换为一个IPanel接口，节省出继承基类的...
关于weui中swiper插件navbar/tab中使用轮播失效问题
qq_32369465的博客
06-19 2426
在使用weui的中的选项卡的中每一个选项卡中使用swiper轮播功能，会发现只有其中一个tab初始化了（也就是只有其中一个可以进行轮播，图片切换），需要在初始化中添加observer:true,//修改swiper自己或子元素时，自动初始化swiper  observeParents:true,//修改swiper的父元素时，自动初始化swiper  完整代码如下：$(function (){  ...
Android UI-实现底部切换标签之方式二 ──Activity（底部采用radioGroup+rutton）添加5个子fragment
K2514091675的博客
04-04 718
此篇博客与http://blog.csdn.net/k2514091675/article/details/69053676类似,唯一区别是将主页面Fragment换成Activity 效果图如下 首先是布局文件 activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res
修改Swiper 底部默认小点样式为任意字符串
qq_45904018的博客
01-29 438
修改Swiper 底部默认小点样式为任意字符串
WEUI的tabbar注意事项
热门推荐
大白能的博客
02-26 1万+
TabbarTabbar 是位于页面底部的导航，相当于 App 的Dock 栏，通过点击每个按钮切换页面的主体内容。Tabbar 的 class 为weui_tabbar， 一般嵌套在 weui_tab 内，weui_tab_bd 为 Tab 页面的主体内容，weui_tabbar_item 为 Tabbar 的一个一个的按钮，建议为 3~5 个，weui_tabbar_icon 为每个按钮的图标，
微信小程序中 使用swiper 滑动切换一级、二级导航
m0_55969466的博客
02-09 2279
其中遇到一个大问题使我放弃了swiper的使用，其中就是swiper有一个固定高度不太好处理，最终使用了touch事件去处理触摸移动，之后会再写一篇文章记录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值