用WeUI 中的weui-tab 配合js实现weui-tab tabbar 页面切换切换功能

图片路径:https://download.csdn.net/download/ypz131023/10825133;(需要的可以私聊给)
示例效果图
在这里插入图片描述
在这里插入图片描述
js代码块
在这里插入图片描述

test
   <div  class="weui-tab">
<div class="weui-tab__bd">
    <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 class="weui-cells weui-cells_access search_show" id="search_show">
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell_primary">
                    <p>智障</p>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell_primary">
                    <p>傻子</p>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell_primary">
                    <p>逗比</p>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell_primary">
                    <p>生活</p>
                </div>
            </div>
        </div>

    </div>

    <!-- /*通讯录*/  -->
    <div  id="tab2"   class="weui-tab__bd-item">
        <div class="page__bd">
            <div class="weui-cells__title">新消息提示跟摘要信息后,统一在列表右侧</div>
            <div class="weui-cells">
                <div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd">单行列表</div>
                    <div class="weui-cell__ft" style="font-size: 0">
                        <span style="vertical-align:middle; font-size: 17px;">详细信息</span>
                        <span class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></span>
                    </div>
                </div>
            </div>

            <div class="weui-cells__title">未读数红点跟在主题信息后,统一在列表左侧</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                        <img src="images/pic_160.png" style="width: 50px;display: block"/>
                        <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span>
                    </div>
                    <div class="weui-cell__bd">
                        <p>联系人名称</p>
                        <p style="font-size: 13px;color: #888888;">摘要信息</p>
                    </div>
                </div>
                <div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd">
                        <span style="vertical-align: middle">单行列表</span>
                        <span class="weui-badge" style="margin-left: 5px;">8</span>
                    </div>
                    <div class="weui-cell__ft"></div>
                </div>
                <div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd">
                        <span style="vertical-align: middle">单行列表</span>
                        <span class="weui-badge" style="margin-left: 5px;">8</span>
                    </div>
                    <div class="weui-cell__ft">详细信息</div>
                </div>
                <div class="weui-cell weui-cell_access">
                    <div class="weui-cell__bd">
                        <span style="vertical-align: middle">单行列表</span>
                        <span class="weui-badge" style="margin-left: 5px;">New</span>
                    </div>
                    <div class="weui-cell__ft"></div>
                </div>
            </div>
        </div>

    </div>
    <!-- 发现-->
    <div id="tab3"   class="weui-tab__bd-item">
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img src="/images/weichat/iconweixinpengyouquan.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>朋友圈</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>

        </div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img src="/images/weichat/saoyisao.png"  alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>扫一扫</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img  src="/images/weichat/share.png"     alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>摇一摇</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
        </div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img  src="/images/weichat/Sercher.png"  alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>看一看</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img  src="/images/weichat/select.png"  alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>搜一搜</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>

        </div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img  src="/images/weichat/nearpeople.png"  alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>附近的人</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img  src="/images/weichat/floatcup.png"  alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>漂流瓶</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>

        </div>
    </div>
    <!--我-->
    <div id="tab4"  class="weui-tab__bd-item">

        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img   src="/images/weichat/package.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>钱包 </p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
        </div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img   src="/images/weichat/xiaochengxu.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>小程序</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img   src="/images/weichat/bhj3dweixinqiang.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>收藏</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img   src="/images/weichat/photo.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>相册</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img   src="/images/weichat/cardpackage.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>卡包</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img   src="/images/weichat/emotion.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>表情</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>


        </div>
        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__hd"><img   src="/images/weichat/seting.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>设置</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
        </div>

    </div>

</div>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值