2020-08-06weui 的tabbar如何固定在底部

最新推荐文章于 2023-07-30 15:38:55 发布
最新推荐文章于 2023-07-30 15:38:55 发布
阅读量1.1k 收藏
点赞数
分类专栏： web前端
原文链接：https://www.cnblogs.com/EarlyBridVic/p/12331240.html
版权

weui 的tabbar如何固定在底部

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!DOCTYPE html>

<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" style="height:100%;">

 

<body style="height:100%;">

  <div class="page" style="height:100%;">

     <div class="page__bd" style="height: 100%;">

        <div class="weui-tab">

            <div class="weui-tab__panel">

             </div>

            <div class="weui-tabbar tab-bottom">

                <a th:onclick="'javasctipt:gototitlecard()'" class="weui-tabbar__item weui-bar__item_on">

                    <span style="display: inline-block;position: relative;">

                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">

                        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>

                    </span>

                    <p class="weui-tabbar__label">题卡</p>

                </a>

                <a th:onclick="'javasctipt:collecttitle()'" class="weui-tabbar__item">

                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">

                    <p class="weui-tabbar__label">收藏</p>

                </a>

                <a th:onclick="'javasctipt:outnotebox()'" class="weui-tabbar__item">

                    <span style="display: inline-block;position: relative;">

                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">

                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>

                    </span>

                    <p class="weui-tabbar__label">笔记发表</p>

                </a>

            </div>

            <div class="weui-tabbar tab-bottom">

                <a th:onclick="'javasctipt:pre()'" class="weui-tabbar__item">

                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">

                    <p class="weui-tabbar__label">上一题</p>

                </a>

                <a th:onclick="'javasctipt:next()'" class="weui-tabbar__item">

                    <span style="display: inline-block;position: relative;">

                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">

                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>

                    </span>

                    <p class="weui-tabbar__label">下一题</p>

                </a>

                <a th:onclick="'javasctipt:submittitle()'" class="weui-tabbar__item">

                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">

                    <p class="weui-tabbar__label">提交</p>

                </a>

            </div>

        </div>

    </div>

</div>

<body>

</html>

 

总之就是一定要加一个panel撑起来中间的部分，才可以让其余的部分下沉到底部去，

记录一下，防止再次遇到坑。

　　

十年4646454sdg5sagsa
关注
专栏目录
挖坑记录_Jquery-Weui weui-tabbar组件 沉底
CrazyMax_zh的博客
01-14 1270
今天使用JQuery-Weui 发现weui-tabbar 不沉底，查询了一下相关资料 ，要给父容器增加高度。问题解决； 另外，需要动态设置好每个DIV得高度 ，使父容器高度永远等于设备分辨率高度，并计算好每个DIV得高度使样式贴合 HTML： <div id="container"> <div class="title">订单列表</div> ...
WEUI页脚固定
八月
11-08 633
<style> .none{display: none} #toolbar { display: flex; justify-content: center; align-items: center; position: fixed; max-width: 100%; left: 0; /*top:0; */ /*置顶*/ bottom: 0px; /*置底*/ margin: au...
WeUI解决tabBar固定在最下方问题
最新发布
qq_45054047的博客
07-30 425
<!-- 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
微信小程序---底部固定导航栏tabBar
LLL_liuhui的博客
03-12 6626
app.json文件：{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/samplereels/samplereels", "pages/discover/discover", "pages/shop/shop", "pages/person/person
weui-tabbar老是在顶部 如何让 height:100%; 起作用
周士凯专栏|重庆广播电视大学 重庆工商职业学院
09-12 4285
今天想用一下weui里的tabbar，发现一直在顶部，不能到底部，究其原因是父容器的 height:100; 不生效，什么都不说了，解决方案来 html style="height: 100%;"> body style="height: 100%;"> div style="height: 100%;"> p> 这样这个div的高度就会100
微信小程序-WeUI界面布局设计入门到精通视频课程
06-11
导航是引导用户在小程序中进行页面跳转的关键，包括顶部导航栏、底部TabBar以及各种跳转方式的实现。理解导航的逻辑和设计原则，可以优化用户的浏览路径。 搜索功能在许多小程序中不可或缺，课程会涵盖搜索框的设置...
weui的使用-demo
12-13
7. **导航（Nav）**：包含底部TabBar和顶部Navigator，用于页面间的跳转。 接下来，我们将通过一个简单的WeUI使用示例来说明如何在微信小程序中应用这些组件。假设我们要创建一个登录页面，步骤如下： 1. 引入WeUI...
WeUI for 小程序使用教程文档总结
采菊东篱下，Python满乾坤！
09-26 1万+
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、弹出菜单actionsheet、图标icon等各式元素。   一、项目地址 https://github.com/weui/weui-wxss/ ...
weui-1.1.2
08-18
6. **导航组件**：如底部导航条（TabBar）、侧滑菜单（SlideMenu）和返回顶部（BackTop），帮助用户在多级页面间轻松导航。 7. **内容展示组件**：如卡片（Card）、列表（List）、图片轮播（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 为每个按钮的图标，
jquery实现始终固定在网页底部菜单提示导航代码
03-18
jquery实现始终固定在网页底部菜单提示导航代码
微信小程序weui的tabs的高度被固定导致出现高度不够的情况
树上骑个猴的博客
05-17 629
获取到当前swiper元素，使用calc设置高度即可，代码如下： .weui-tabs .weui-tabs-swiper { height: calc(100vh - 100px) !important; } 如果需要满屏，则设置： .weui-tabs .weui-tabs-swiper { height: 100vh !important; }
JQuery添加底部固定导航条
技不如人
06-13 7799
使用jquery将div固定在页面底部
element-plus el-tabs组件label固定，不随着内容溢出滚动
周厚强的博客-13797120587
05-06 2169
vue3 element-plus el-tabs组件label固定，不随着内容溢出滚动。
weui 1.1.2版本tabbar切换以及底部位置问题
菜鸡奋斗ing的博客
10-30 7837
突然发现这个weui好坑，居然有的功能还要自己写。还是我的姿势不正确？ tabbar底部未能正确显示在页面最底部，解决办法：在html,body元素加上style=”height:100%”即可解决。 tabbar解决切换页面demo代码↓:<script type="text/javascript"> $(function(){ $('.weui-tabbar__item').
小程序自定义tabbar到任意页面
x_Yanger的博客
11-07 1445
很多时候不是tabbar的页面也需要加上tabbar导航所以我们需要去自定义它～ （1）打开小程序官方文档 按照图片中的箭头找到按需下载 选择里面的tabbar下载下来放入我们小程序的项目中 （2）在需要自定义tabbar的页面json中引入我们下载好的weui { "usingComponents": { "mp-tabbar": "../../weui/tabbar/tabbar...
BottomTabBar实现底部导航页
南城一点风雨的博客
11-04 492
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
weui中如何点击遮罩关闭弹窗weui-mask
06-13
1. 在弹窗的HTML代码中，添加一个class为weui-mask的遮罩层元素，例如： ``` <div class="weui-mask"> <div class="weui-dialog"> <div class="weui-dialog__hd"> <strong class="weui-dialog__title">弹窗标题 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值