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

一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tabbar的情况下自制 tabbar 的方法.并说说这几种方法各自的特色. 类 navigator 跳转方式 类 navigator 跳转方式是我自己起的名称,因为它的实现思路就是这个样子的.期初参考 微信小程序自定义tabBar组件开发 这篇博文的思路.进行了这种方式的尝试,并为后续提供了解决思路.在

微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动手写一个和微信小程序提供的tabbar相同的效果,而且还可以满足灵活配置的功能.有参照有赞小程序 效果: 效果A: 2.效果B: 实现:              项目结构如下:                     II 效果A实现: 1>wxml的代码: Page({ data: { bloc

图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. tabBar的基本属性 tabBar的list属性 tabBar的list属性介绍 参考代码 注意事项 list :接受一个数组,只能配置最少 2 个.最多 5 个 tab.tab 按数组的顺序排序,每个项都是一

大家好,我是前端菜鸟,大家可以叫我惊蛰,今天给大家分享一下在微信小程序中对weui的引入和使用,其他的也不再赘述,文中有不对的还请指正,谢谢. 直入主题: 1.下载weui 进入GitHub https://github.com/weui/weui-wxss/ 进入如下页面,点击红色框选下载程序代码 解压后进入文件夹,图示路径下的weui.wxss就是我们所需要的weui库  2.引入weui 打开微信开发者工具创建项目(这个就不在介绍了),目录如下 创建好项目,接下来要做的就是将刚才下载解压的

项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class="weui-flex tab-bar" style="color: {{color}}; background: {{backgroundColor}}; {{position=='top'? 'top: 0' : 'bottom: 0'}}; {{borderStyle? (posi

微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作,需要在我的个人中心页面中实时显示出来,但是小程序中的tabbar切换类似于tab切换 并不会进行页面刷新请求 所以总是会造成一些数据更新不及时问题 而阅读小程序文档发现了小程序是给提供了解决办法的 onShow /** * 生命周期函数--监听页面显示 */ onShow: function () { }, 这个方法在页面进行显示的时候就会重新执行一次,所以我想到的解决方案就是将需要进行实时更新的数据进行封装方法 getreloa

[1]简介 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库.有的,它就是WeUI. WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素. WeUI是在微信终

在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 当设置 position 为 top 时,将不会显示 icon tabBar 中的 list 是一个数组,只能配置最少2个.最多5个 tab,tab 按数组的顺序排序. 在实际开发过程中,小程序自带的tabbar样式并不能满足设计提供的开发需求,所以需要我们自

最近做项目的时候,突然来了个小特殊的需求,根据客户的类型来动态显示底部的tabBar菜单.当时我就有点小懵逼了,这个不是小程序自带的组件么?还要做成动态?这就有点尴尬了..... 不过也只是一时尴尬而已,然后我就展开了搜索之旅.....然后发现,官方的组件确实没办法做动态,那咋办,如果真的有这个需求那也是得去处理滴呀~然后也看了有一些做到这效果的方法,那就试一下呗..其实就是自定义个tabBar的模板,以下是实现: 首先,既然是说自定义组件,那是用到template了.那先在Page里新建个te

  https://github.com/Tencent/weui-wxss/ 下载地址用于小程序的https://github.com/Tencent/weui   下载地址用于H5    运用示例在下载文件的文件夹 weui-wxss-master\dist\example目录下   小程序全局用法 在app.wxss用@import "weui.wxss" 另外,小程序也有许多的框架 如mpvue 等

tabBar不显示 在app.json中配置了4个页面,在tabBar的list中随意写了两个页面,编译后发现不能显示tabBar. { "pages": [ "pages/musicList/musicList", "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window": { "backgro

个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义tabbar, 跳转的方式都只能是页面重定向的,导致tab页上的ABCD互相跳转的时候,每次都会重新渲染视图,由此带来的 视觉效果很不好,没有系统tabbar跳转地自然,万般无奈之下,只好用回系统自带的tabbar. 如果你有好的方法能够解决自定义tabbar跳转重新渲染的问题,烦请告知,在此谢过!

最近在研究小程序的时候,遇到了一个问题,就是tabbar切卡,在android上有fragment,在RN上也有提供一个第三方的组件来用,微信小程序,好像没有专门的一个组件来实现这个功能,度娘了大半天,虽然也有好多人实现过这样的功能,但是我发现要么是不符合我的需求,那么就是实现起来过于繁琐.于是我参考多个高手写的博客,实现出了一个符合自己需求的.先上代码. 先看js文件: const util = require('../../utils/util.js'); Page({ data: { na

代码片段: wechatide://minicode/IUoCyemJ7D3d GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/master/custom-tabbar 在项目中要求用tabbar,奈何老板嫌微信自带的tabbar太丑而且功能也不够丰富,因此需要自定义tabbar,没办法就只能自己重新造一个,在造轮子之前从网上找了不少但都是直接使用navigateTo或者redirectTo实现跳转功能,每次都重新加载一下页面实

1.从微信小程序的官网扣下来的demo,实际测试中,发现6s ios10 系统不兼容,里面的内容出不来 <cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar

微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear size:icon的大小,单位px(2.4.0起支持rpx)[默认值23px] color:icon的颜色,同css的col

app.json中添加tabbar "tabBar": { "color": "#a9b7b7", //未选中字体颜色 "selectedColor": "#11cd6e", //选中字体颜色 "borderStyle": "black", "list": [{ "pagePath": "pages/index/ind

背景 诶,当然是为了实现更有温度的代码啦(背后设计师拿着刀对着我) 自带tabbar app.json中配置: tabBar: { backgroundColor: '#fff', borderStyle: 'white', color: '#333', selectedColor: '#333', list: [ { pagePath: 'pages/index', text: '活动首页', iconPath: 'resource/images/home.png', selectedIcon

搜索框 对应代码如下: wxss文件 <view class="page"> <view class="page__hd"> <view class="page__title">SearchBar</view> <view class="page__desc">搜索栏</view> </view> <view class="pa

"tabBar": { "backgroundColor": "#303133", "color": "#ffffff", "selectedColor": "#CC1004", "list": [ { "pagePath": "pages/subject/subject", "text"