WeUI解决tabBar固定在最下方问题

于 2023-07-30 15:38:55 发布
阅读量372 收藏
点赞数
分类专栏： 各种问题 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45054047/article/details/132007723
版权 
<!--
style="background-color: #FDFDFDFF;position: fixed;bottom: 0;width: 100%"
解决下方按钮固定问题
-->

页面具体操作

找到总div加上行内样式就可以了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
</head>
<body>


<script type="text/javascript">
    $(function(){
        $('.weui-tabbar__item').on('click', function () {
            $(this).attr('aria-selected','true').addClass('weui-bar__item_on');
            $(this).siblings('.weui-bar__item_on').removeClass('weui-bar__item_on').attr('aria-selected','false');
            var panelId = '#' + $(this).attr('aria-controls');
            $(panelId).css('display','block');
            $(panelId).siblings('.weui-tab__panel').css('display','none');
        });
    });
</script>

<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">


            <div id="panel1" role="tabpanel" aria-labelledby="tab1" class="weui-tab__panel">首页</div>

            <!--九宫格代码-->
            <div class="page">
                <div class="page__hd">
                    <h1 class="page__title">Grid</h1>
                    <p class="page__desc">九宫格</p>
                </div>
                <div class="weui-grids">
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:" class="weui-grid" role="button">
                        <div class="weui-grid__icon">
                            <img src="./images/icon_tabbar.png" alt="">
                        </div>
                        <p class="weui-grid__label">Grid</p>
                    </a>
                </div>
            </div>








            <!--
            style="background-color: #FDFDFDFF;position: fixed;bottom: 0;width: 100%"
            解决下方按钮固定问题
            -->
            <!-- 下方总按钮 -->
            <div role="tablist" aria-label="选项卡标题" class="weui-tabbar" style="background-color: #FDFDFDFF;position: fixed;bottom: 0;width: 100%">

                <!-- 首页按钮 -->
                <div id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips" aria-selected="true" aria-controls="panel1" class="weui-tabbar__item weui-bar__item_on">
                    <div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;">
                        <a href="index.html" target="_self">
                            <img src="image/index.png" alt="" class="weui-tabbar__icon">
                        </a>
                        <!--                               <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span> -->
                    </div>
                    <p id="t1_title" aria-hidden="true" class="weui-tabbar__label" style="color: black">首页</p>
                </div>

                <!-- 全部按钮 -->
                <div id="tab2" role="tab" aria-labelledby="t2_title" aria-selected="false" aria-controls="panel2" class="weui-tabbar__item">
                    <a href="all.html" target="_self">
                        <img src="image/all.png" alt="" class="weui-tabbar__icon">
                    </a>
                    <p aria-hidden="true" id="t2_title" class="weui-tabbar__label">全部</p>

                </div>


                <!-- 发现按钮 -->
                <div id="tab3" role="tab" aria-labelledby="t3_title" aria-describedby="t3_tips" aria-selected="false" aria-controls="panel3" class="weui-tabbar__item">
                    <div id="t3_tips" aria-hidden="true" style="display: inline-block; position: relative;">
                        <a href="find.html" target="_self">
                            <img src="image/find.png" alt="" class="weui-tabbar__icon">
                        </a>
                        <!--                               <span class="weui-badge weui-badge_dot" role="img" alt="new" style="position: absolute; top: 0; right: -6px;"></span> -->
                    </div>
                    <p id="t3_title" aria-hidden="true" class="weui-tabbar__label">发现</p>
                </div>

                <!-- 我的按钮 -->
                <div id="tab4" role="tab" aria-labelledby="t4_title" aria-selected="false" aria-controls="panel4" class="weui-tabbar__item">

                    <a href="my.html" target="_self">
                        <img src="image/my.png" alt="" class="weui-tabbar__icon">
                    </a>
                    <p class="weui-tabbar__label" aria-hidden="true" id="t4_title">我的</p>
                </div>


            </div>





        </div>
    </div>
</div>

</body>
</html>
孤我.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
weui-tabbar使用
weixin_44189639的博客
12-05 3025
weui画页面 tabbar用法 <!doctype html> <html> <head> <meta charset="utf-8"> <title>总裁月报</title> <meta name="viewport" content="width=device-width,initial-s...
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 为每个按钮的图标，
微信小程序---底部固定导航栏tabBar
LLL_liuhui的博客
03-12 6550
app.json文件：{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/samplereels/samplereels", "pages/discover/discover", "pages/shop/shop", "pages/person/person
tab weui 页面切换_tab · WeUI.JS 中文文档 · 看云
weixin_31815843的博客
12-24 247
## tab(selector, [options])tab tab导航栏**Kind**: global function| Param | Type | Default | Description || --- | --- | --- | --- || selector | string | | tab的selector || [options] | object | | 配置项 || [...
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
09-01
本篇文章主要介绍了微信小程序开发之选项卡(窗口顶部TabBar)页面切换，具有一定的参考价值，有需要的可以了解一下。
一个用weui+html+css页面的例子
03-26
卖鲜花的网站的html页面，只有html和js但是很完整，拿下来就能用
WeUI 最新版 js 及 css 下载
05-16
link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"> <!-- ...
微信小程序中weui用法解析
12-13
在做微信小程序的时候就想着找一个UI库，方便我们前端开发，然后查找资料，发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库，由微信官方设计团队...
weui中的picker使用js进行动态绑定数据问题
01-19
解决方案;　picker和Select组件是通过input标签绑定，可以先通过input的父级元素移除input标签，重新插入input标签，最后重新初始化picker或Select组件。 <div class=weui-cell> <div class=weui-cell__hd>...
weui.js--修改版解决部分安卓手机日期少展示一天的问题
08-24
解决weui datePicke 在部分安卓上日期少一天的问题,修改版
jquery实现始终固定在网页底部菜单提示导航代码
03-18
jquery实现始终固定在网页底部菜单提示导航代码
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
01-03
本文实例讲述了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能。分享给大家供大家参考，具体如下： 微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> 哈哈</vie
jquery weui 实现手机滚动刷新，结合底部tabber
cocoaxian的博客
08-03 8482
手机微信里页面实现滚动刷新，在底部可以加上导航栏。
JQuery WEUI Tabbar 的坑
qq_43347905的博客
03-11 336
JQuery WEUI Tabbar 的坑 JQuery WEUI Tabbar 的坑 JQuery WeUi Tabbar 不在底部显示 其实就是因为 JQuery WeUI 没有定义 html, body 的高度，所以给其定义个 height: 100%; 就可以了！ 就像这样就行 <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min....
微信小程序开发---自定义tabBar
qq_30817073的博客
08-06 7881
最近开发微信小程序，公司要求做一个类似闲鱼的tabbar，但是网上大多资料的tabbar都会在页面切换的时候重新渲染，所以我写了一个不会重新渲染的tabbar，有需要的直接拿走不谢。https://github.com/SuRuiGit/wxapp-customTabbar 使用步骤如下： 第一步：找到项目中的tabbarComponent目录，拷贝到你的工程中，然后将tabbarCompon...
weui 1.1.2版本tabbar切换以及底部位置问题
菜鸡奋斗ing的博客
10-30 7812
突然发现这个weui好坑，居然有的功能还要自己写。还是我的姿势不正确？ tabbar底部未能正确显示在页面最底部，解决办法：在html,body元素加上style=”height:100%”即可解决。 tabbar解决切换页面demo代码↓:<script type="text/javascript"> $(function(){ $('.weui-tabbar__item').
如何将TabBar放置底部?
yilongxian520的专栏
04-16 1603
如何将TabBar放置底部? 在xml布局文件中，将TabWidget放于FrameLayout的下面（两者是垂直线性的关系），并分配各个组件的权重另外，如果想去掉Tab中那个丑陋的白线，可以通过设置其Padding实现. http://schemas.android.com/apk/res/android"         android:id="@android:id/tabhos
weui-tabbar老是在顶部 如何让 height:100%; 起作用
php阿宝的博客
04-17 475
<html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> 这样这个div的高度就会100%了 </p> </div> </body&g...
BottomTabBar实现底部导航页
南城一点风雨的博客
11-04 482
1.导依赖： compile 'com.hjm:BottomTabBar:1.0.0' 2.在XML中定义一下该控件： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" andr
vue在h5中使用weui实现日期时间选择器
最新发布
05-11
可以使用weui.js中的DateTimePicker组件来实现日期时间选择器，具体实现步骤如下： ...注意：在使用weui.js中的DateTimePicker组件时，需要将input元素的readonly属性设置为true，禁止用户手动输入日期时间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值