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

最新推荐文章于 2024-08-06 14:28:38 发布
最新推荐文章于 2024-08-06 14:28:38 发布
阅读量1.2w 收藏 6
点赞数
分类专栏： 前端 文章标签： weui-tab tabbar   页面切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ypz131023/article/details/84774982
版权

图片路径：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>
玲子的猫
关注
专栏目录
实现Tab栏切换
Princess_ya的博客
07-14 266
js实现切换Tab栏
tab weui 页面切换_WeUI教程 - loadmore、msg、tab选项卡组件
weixin_35919125的博客
12-24 650
loadmore 加载更多Loadmore加载更多正在加载暂无数据小程序下拉刷新，下拉加载更多的教程(29、30节)https://ke.qq.com/course/183926#tuin=4f8da6msg 操作结果通知界面组件1、引导按钮Msg提示页成功提示页失败提示页jsPage({openSuccess: function () {wx.navigateTo({url: 'msg_succ...
weui-tabbar使用
weixin_44189639的博客
12-05 3124
weui画页面 tabbar用法 <!doctype html> <html> <head> <meta charset="utf-8"> <title>总裁月报</title> <meta name="viewport" content="width=device-width,initial-s...
微信小程序weui的使用
最新发布
on1yLX的博客
08-06 321
上图所示就是weui使用代码，这里我们随意挑选一个模块badge示例，对应的badge.wxml的代码其实就是weui的各个badge徽章标记的样式，我们直接将badge.wxml中的代码复制，粘贴到小程序项目中的新建页面test.wxml中看看。上有小程序weui的样式展示，当然我们也可以直接进weui的小程序手机上查看weui的样式，然后根据需求来选择组件的使用，但是这里都没有介绍weui具体的使用，但是example文件夹里有。直接将该文件扔进vscode里，我们就可以看到各个组件的代码。
weui tabbar 切换
weixin_33804582的博客
12-27 2640
Html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"
tab weui 页面切换_weui tabbar 切换
weixin_39603265的博客
12-24 605
Html:.weui_navbar_item.weui_bar_item_on {color: #2196F3;cursor: pointer;}患者我的问医生我的问医生内容.......我的........jiaj.css/*tab 切换*/.weui_navbar_item{position: relative;display: block;-webkit-box-flex: 1;-webki...
怎么把一个控件放到tab页面上去?_Flutter仿头条顶部tab切换实现
weixin_39714383的博客
12-03 142
微信公众号：[程序员指北]关注可了解更多的教程。问题或建议，请公众号留言;概述 上篇我们讲了实现一个仿闲鱼底部导航栏的功能，今天主要实现一个仿头条顶部tab切换实现，这种效果在项目中同样经常用到，接下来我们就从头开始实现。效果图 老规矩，开局先上效果图。仿头条顶部tab切换实现 要实现这样的效果，需要使用TabBar进行实现。我们先讲一下TabBar的基本属性。TabBar 和 TabBarVi...
挖坑记录_Jquery-Weui weui-tabbar组件 沉底
CrazyMax_zh的博客
01-14 1271
今天使用JQuery-Weui 发现weui-tabbar 不沉底，查询了一下相关资料 ，要给父容器增加高度。问题解决； 另外，需要动态设置好每个DIV得高度 ，使父容器高度永远等于设备分辨率高度，并计算好每个DIV得高度使样式贴合 HTML： <div id="container"> <div class="title">订单列表</div> ...
微信小程序中weui用法解析
12-13
在做微信小程序的时候就想着找一个UI库，方便我们前端开发，然后查找资料，发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库，由微信官方设计团队...
微信小程序-WeUI界面布局设计入门到精通视频课程
06-11
导航是引导用户在小程序中进行页面跳转的关键，包括顶部导航栏、底部TabBar以及各种跳转方式的实现。理解导航的逻辑和设计原则，可以优化用户的浏览路径。 搜索功能在许多小程序中不可或缺，课程会涵盖搜索框的设置...
weui的使用-demo
12-13
【微信小程序】是一种由微信平台...在实际开发中，可以根据项目需求灵活组合和扩展WeUI的组件，打造各种复杂的页面布局和交互功能。WeUI以其简洁的API和良好的文档支持，成为了微信小程序开发中不可或缺的UI工具之一。
weui-1.1.2
08-18
WeUI 是一个专为手机移动Web开发和微信小程序开发设计...通过使用WeUI 1.1.2，开发者可以快速构建出具有微信风格的高质量移动Web应用，减少重复劳动，提高开发效率，同时确保用户在使用过程中享受到一致且舒适的体验。
WeUI实现带图片的tab切换
沧海龙腾LV的博客
02-22 1684
tab图标命名方式：tab0.png，tab0_p.png, tab1.png, tab1_p.png, tab2.png, tab2_p.png…… html: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
tab weui 页面切换_tab · WeUI.JS 中文文档 · 看云
weixin_31815843的博客
12-24 275
## tab(selector, [options])tab tab导航栏**Kind**: global function| Param | Type | Default | Description || --- | --- | --- | --- || selector | string | | tab的selector || [options] | object | | 配置项 || [...
weui 搜索 weui-search-bar
热门推荐
weixin_42861240的博客
11-30 1万+
效果图 1、首先引入css跟js &lt;link rel="stylesheet" type="text/css" href="lib/weui.min.css"&gt; &lt;script src='js/jquery.min.js'&gt;&lt;/script&gt; &lt;script src='lib/jquery-weui.min.js'&gt;&lt;/
Ecshop 之weui-tab 加载瀑布流
octdream的专栏
06-20 809
上一篇文章，我已经实现了ecshop使用jquery.more.js加载瀑布流，可是在测试过程中我发现，原本在chrome浏览器中测试可以通过，可是到了我手机的浏览器中测试时，却怎么也不能滚动加载，做了很多尝试问题依旧，我猜想，极有可能是因为jquey.more.js与手机浏览器存在兼容问题，我不想去考虑太深的东西，所以改变加载方式。 由于我的页面中是使用weui-tab的方式来分类加载数据，所...
tab weui 页面切换_weui tabbar 到底怎么用啊？tab页面为什么不能切换？
weixin_33212915的博客
12-24 383
<body ontouchstart><div class="container js_container"><!--底部菜单--><div id="tab" class="weui-tabbar" style="height: 45px;position: fixed;"><ul class="weui-navbar"><li c...
css图片滑动切换图_最近很流行的一种tab切换样式
weixin_39581719的博客
11-19 681
1、需求如下：图片一：进入页面下滑开始出现tab页图片二：当页面滑动到一定位置时tab页会固定图片三：在tab没有滑动到一定位置时，点击切换，也要固定在头部图片四：tab每次进行切换时对应的内容要“从头”开始展示2、代码如下：js部分 <div class="order-head"> <h1 class="free-custom-head">预约投保<...
微信小程序使用tabbar实现点击切换页面
weixin_45595203的博客
04-05 5502
tabbar具体如何使用或者具体属性，请参考：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html 接下来就直接放代码： tabbar.wxml <view class="page"> <mp-tabbar class="topbar" style="position:fix...
微信小程序搭建：mpvue+mpvue-weui+fly.js实战教程
"本文主要讲解了如何使用mpvue、mpvue-weui和fly.js搭建微信小程序的详细步骤，适合初学者和开发者参考。" 在微信小程序开发中，选择合适的框架和工具能够极大地提高开发效率和用户体验。本文介绍的是一种基于mpvue...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值