WeUI实现Android ViewPager+fragment切换效果

最新推荐文章于 2020-12-24 12:26:15 发布

沧海龙腾LV

最新推荐文章于 2020-12-24 12:26:15 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏： js javaweb 文章标签： WeUI js android viewpager fragment

本文链接：https://blog.csdn.net/xialong_927/article/details/87881499

js 同时被 2 个专栏收录

22 篇文章

订阅专栏

javaweb

14 篇文章

订阅专栏

本文介绍了一个使用WeUI框架的HTML页面示例，展示了如何集成微信JS SDK及WeUI JS库，实现底部Tab栏切换功能和搜索组件。页面包含四个Tab：首页、位置、图片和我的，每个Tab对应不同的内容区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <title>首页</title>
    <link href="../css/weui.min.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
</head>
<body>
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-tab__panel">
            	<!-- 首页 -->
				<div id="tab1"  class="weui-tab__bd-item weui-tab__bd-item--active">
        			<div class="weui-search-bar" id="search_bar">
            			<form class="weui-search-bar__form">
                			<div class="weui-search-bar__box">
                    			<i class="weui-icon-search"></i>
                    			<input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索" />
                    			<a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
                			</div>
                			<label for="search_input" class="weui-search-bar__label" id="search_text">
                    			<i class="weui-icon-search"></i>
                    			<span>搜索</span>
                			</label>
            			</form>
            			<a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel">取消</a>
        			</div>
    			</div>
    			<!-- 位置 -->
			    <div id="tab2" class="weui-tab__bd-item">
			        <div class="page__bd">
			            <div class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div>
			        </div>
			    </div>
			    <!-- 图片 -->
			    <div id="tab3"   class="weui-tab__bd-item">
			        <div class="page__bd">
						<div class="weui-cells__title">第三页</div>
					</div>
			    </div>
			    <!-- 我的 -->
    			<div id="tab4"  class="weui-tab__bd-item">
			    	<div class="page__bd">
						<div class="weui-cells__title">第四页</div>
					</div>
			    </div>
            </div>
            <!-- 底部tab -->
            <div class="weui-tabbar">
                <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
                    <img src="../images/tab0_p.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">首页</p>
                </a>
                <a href="javascript:;" class="weui-tabbar__item">
                    <img src="../images/tab1.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">位置</p>
                </a>
                <a href="javascript:;" class="weui-tabbar__item">
                    <img src="../images/tab2.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">图片</p>
                </a>
                <a href="javascript:;" class="weui-tabbar__item">
                    <img src="../images/tab3.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label">我的</p>
                </a>
            </div>
        </div>
    </div>
	<script type="text/javascript">
		var title = ['首页','位置','图片','我的'];
	    $(function(){
	    	//设置默认页面
	    	$('.weui-tab__bd-item').eq(0).show().siblings().hide();
	    	//设置tab切换
	        $('.weui-tabbar__item').on('click', function () {
	            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
	            //获取当前标签
	            var curr = $(this).index();
	          	//切换页面
		    	$('.weui-tab__bd-item').eq(curr).show().siblings().hide();
	          	//设置标题
	            $(document).attr('title', title[curr]);
	          	//切换tab图标
	            $('.weui-tabbar__item').each(function(index,element){
	            	if(index == curr){
	            		$(element).find('img').eq(0).attr('src', '../images/tab' + index + '_p.png');
	            	}else{
	            		$(element).find('img').eq(0).attr('src', '../images/tab' + index + '.png');
	            	}
	            });
	        });
	    });
	</script>
    <!-- 计算单位，伸缩式布局 -->
    <!-- <script src="../js/auto-rem.js"></script> -->
</body>
</html>

完！！！