weui中tabbar

2026-09-11

weui 中的tabbar导航

最近做微信的服务号项目,用的weui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好.真是很让人头疼! 所以结合着自己做的项目,随便写一点东西. 比如说,tabbar导航的切换.官网给说的对应的文档如下图: 从我个人角度而言,实在不能短时间能看出来具体的用法. 还是直接晒一下用法吧! <div id="tab-home" class="weui-tabbar"> <a href="javascript:;&quo

WeUI中的Css详解

WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar). Demo页面: https://weui.io Github页面: https://github.com/weui/weui 下面讲一讲我从WeUI中学到的CSS技巧. Button 从这里我开始注意到, WeUI的实现中, 很多边框都是

Android 中“TabBar”的背景拉伸问题

在最近的一个工程中,要求有一个在上方了tabbar,上面有并排的3个方形按钮,每个按钮都有背景图.问题来了,如何让图片在不同尺寸的屏幕上不失真呢?(由于我们的项目比较小,工时很短,不能为每一个屏幕尺寸单独制作图片,所以我们所有屏幕上只用一套图片.)一开始我们使用了weight这个属性,让整个tabbar的weight恒定,这样做的话,的确可以达到动态调整tabbar高度的效果,但是由于每个屏幕的宽高比不同,这样的固定weight的tabbar中的背景图也有一定的失真现象.后来,我们使用了.9图片

记录WEUI中滚动加载的一个BUG

最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较晦涩的.(个人看法) 微信端展示公司订单,采用了滚动加载而没有用分页,觉得一般移动端分页的处理比较少.当然,条件搜索才是满足用户精准查找的核心,无论是分页还是滚动加载都只是给用户一个大致浏览的处理. 顺便说说注意的一点,jquery-weui这个文件引入的位置应该在jq文件之后,这样才能在Jq的基础

微信小程序开发过程中tabbar页面显示的相关问题及解决办法！

在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示tabbar,而有些页面不显示tabbar呢?今天我把我在开发过程中遇到的问题整理出来跟大家分享.问题1:为什么页面底部不显示tabbar?很多网友(包括我自己)也遇到过此类问题,在app.json里面明明加了tabbar,list里面也加了路径怎么就是不显示呢?举例,如下代码,为什么屏幕页面底部没有如

在小程序中Tabbar显示和隐藏的秘密

其实对Tabbar 的用法的理解总结下来分这几个阶段: 第一阶段:在 app.json 中配置 "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": &quo

script 写在body和head的区别（WEUI中使用swiper删除）

区别简述: 在HTML body部分中的JavaScripts会在页面加载的时候被执行.在HTML head部分中的JavaScripts会在被调用的时候才执行. JavaScript应放在哪里 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中.当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载. <html><head><script type=”text/javascript”>….</script

JQuery weui 中的Popup （弹出层：底部）

//弹出层(从底部) <div id="bottomb" class="weui-popup__container popup-bottom"> <div class="weui-popup__overlay"></div> <div class="weui-popup__modal"> 弹出层的内容....(默认是不显示的) </div> </div>

weui中的日期选择控件关于时间段的设置！

近日用到了日期控件,但是需要把时和分去掉,功能上是做一个预约的功能,所以只需要在年月日后面提供时间段的选择. BUG在于如果第一次点开弹框而没做任何操作,然后点了其他任意区域则弹框关闭,甚至你的8:00-10:00可能是没有选中的状态. 这时候如果第二次再次点输入框显示弹框的时候,回显就会有Bug,直接显示成 2018-01-1-25 8. 打印看了一下主要是分割字符串时候不对,导致设置初始值的时候弄错,分割成这样 ['2018','01','25','8','00-10','00]. 这个bu

weui中的picker使用js进行动态绑定数据

解决方案; picker和Select组件是通过input标签绑定,可以先通过input的父级元素移除input标签,重新插入input标签,最后重新初始化picker或Select组件. <div class="weui-cell"> <div class="weui-cell__hd"><label for="time-format" class="weui-label">性别</

weui中的picker滑动报错

html { touch-action: none; } 在页面插入上述代码即可解决

weui.css中flex容器下子项目的水平和垂直居中

想用weui.css写微信平台的页面,发现没有让flex(weui-flex)容器下,子项目(weui-flex__item)居中的类. 百度了一下,是用justify-content:center;实现水平居中,用align-items:center 实现垂直居中. 可是当我这样写的时候,竟然没有用!  <style> .justify{ justify-content: center; } .align{ align-items: center; }

【小程序】小程序中设置 tabBar

小程序中 tabBar 的设置,tabBar 就是底部导航栏,在app.json中配置. list 为数组至少两项.tab栏的 position 为 top 时间,不显示图标. "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle":"black", "backgro

react-native的tabbar和navigator混合使用

前段时间搭建项目使用了navigator和react-native-tab-navigator,现在我教大家搭建一个通用的简单框架. 先把几张图贴在这里,这就是我们今天要搭建的东西,别看页面简单,但是可塑性强啊(我才不会说我已经懒到一定程度了呢...)! 1. 2. 3. 上面的三张图就是咱们要搭建的简单框架. 大家都知道,一般一个app都有导航.tabbar以及tabbaritem的子页面.那么上面的第一张就是导航初始化的页面,图2是tabbar的页面,图3就是t

关于自定义tabBar时修改系统自带tabBarItem属性造成的按钮顺序错乱的问题相关探究

关于自定义tabBar时修改系统自带tabBarItem属性造成的按钮顺序错乱的问题相关探究测试代码:http://git.oschina.net/Xiyue/TabBarItem_TEST 简书地址:http://www.jianshu.com/users/f599d56f0592/latest_articles 序引现在的主流框架中,在通常情况下,tabBar的属性一般都在tabBarController中全局设定好,且设定后一般就不会去改动.此外,现在绝大部分的App中,tabBa

微信小程序中的组件

前言之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!(小程序文档),现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中复用,提高自己代码的可读性,降低自己维护代码的成本! 本篇文章就是手把手教你实现小程序中自定义组件,坐稳啦

jQuery WeUI V0.4.2 发布

http://www.oschina.net/news/71590/jquery-weui-v0-4-2 jQuery WeUI V0.4.2 发布了! jQuery WeUI 中使用的是官方WeUI的CSS代码,并提供了jQuery/Zepto版本的JS API实现.因为直接使用了官方的CSS,所以你不用担心跟官方版本的冲突.实际上 jQuery WeUI == WeUI + jQuery插件.轻量的特性使jQuery WeUI 可以很好的和VUE.React.Angular等JS框架结合使用

为Emacs添加标签tabbar功能

Emacs的强大之处在于,只有你想不到,没有她做不到! 折腾了两个小时,终于在终端putty上搞定了tabbar.下面是一些资源,以方便后面的同学快速搞定. 首先下载tabbar的插件tabbar.el,地址在:http://www.emacswiki.org/emacs/download/tabbar.el 当然网上还有叫什么tabbar_ruler的一个插件,我试着用了一下,在终端下实在不知道它有啥用...就果断卸载了. 下面是我在.emacs中tabbar的配置 (require 'tab

iOS彩票项目--第一天，自定义TabBar控制器和自定义TabBar，自定义导航控制器

一.环境配置,和项目层次搭建二.自定义TabBar 项目中TabBar中的导航按钮美工给的图片太大,图片中包含了图片和文字.最主要的是TabBar上面的按钮图片尺寸是有规定的,当高度大于44的时候,就不会显示了解决办法:自定义TabBar,继承自UIView,给UIView设置相应个数的按钮,自定义控件需要 1.自定义控件类 -- 自身有存放模型数据的集合,在数据的setter方法中定义子控件,给子控件设置相应的属性 2.模型类--这里的模型类借用了系统的UITabBarItem,因为系统设

uniapp根据登录用户的角色动态的改变tabBar的数量和内容

此文章借鉴于https://blog.csdn.net/fuyuumiai/article/details/109746357,在此基础上修改小部分内容,适用于我这种uniapp小白介绍: 现在我们要满足的项目需求是根据登录用户角色的不同,tabBar的数量和内容显示不同,如下图用户角色为管理员时: 用户角色为普通用户时: 登录用户的角色不同,因为权限不同所以tabBar的内容和数量也不同,而uniapp中tabBar本身的配置 uni.setTabBarItem(OBJECT) 只

weui中tabbar

热门专题