微信小程序自定义标签 第1篇
通过改组件自带的 事件绑定函数 onChange
解决 (通过其active
的变化使用编程式导航(文章介绍更新中)索引list
的url
路径切换页面
代码部分
但是在设定好之后会出现如下情况,页面有正常跳转,但是图标却出了bug
,其中active
在组件中是控制跳转到哪一个页面的,为0跳转到一个,为1跳转到第二个 ,在调试中,我发现active
的值没有毛病,按道理不应该出bug
,所以笔者认为应该是页面跳转时候,组件中的active
会变化,而js文件的active
没问题
解决方法:将active 存贮到store 进行全局共享
添加字段和方法
在文件中 修改onChnage函数
效果:
实现成功
修改标签颜色值
效果图:
微信小程序自定义标签 第2篇
2.导航页边组件。
有一说一哈 我觉得自定义导航栏好麻烦 然后我最近又把他改掉了
先新建个新的页面四件套 wxml里面实现tabBar的展示 之上则是根据条件加载不同的组件 ,这些组件就是原先的导航页 改的(这个改的很省事)
嫌着蛋疼 没想出新功能的时候就想到些花里胡哨的玩意儿,换肤功能
刚刚开始都想哭了因为最早页面样式我想写的到处都是 整理死我了
大体这样:
1.将全部需要受到换肤影响的元素都找出来
2.在每个页面js的data中增加一个skin(名字你随意)作为 1中的className (一个皮肤不同位置有不同的的样式 那就多配几个)
3增加一个wxss文件 里面写好所有的皮肤样式 样式为类选择器 类名用用于skin赋值
中globalData也新增skin(用于每个页面skin默认值) ,并新增一个设置相应界面skin值的函数setSkin(that){}
5.提供一个选择皮肤的功能,选择对应的皮肤后 将所选的skinName 存入缓存(为了持续生效) 后调用的setSkin函数 setSkin函数通过获取缓存中的数据 为相应页面skin赋值
5.在每个页面的onshow中 调用的setSkin(that){}函数为skin赋值
微信小程序自定义标签 第3篇
知道怎么引用 Vant
组件之后,接下来就根据需求来对其进行修改,可以通过 slot
自定义图标,其中 icon slot
代表未选中状态下的图标,icon-active slot
代表选中状态下的图标。来看一下 vant
提供的参数 TabbarItem Slot
:
微信小程序自定义标签 第4篇
效果:实现一个自定义tabBar,使消息tabBar能够显示消息数量,并通过全局共享的方式,控制消息数量
需要的知识点如下:
自定义组件主要分为三个步骤(许多实例实现步骤差不多流程)
注意:在配置自定义tabBar
时,中
节点list不能删除,因为仍需要指定tabBar
页面,这是tabBar
的必要配置,但是这些字段不会影响自定义渲染。(如果低版本不生效,默认读取该字段渲染)
官方文档如是说
和默认tabBar一样,在 中仅需要在tabBar节点设置( custom = true
设置为自定义),然后需要添加代码文件,
代码文件
custom-tab-bar/
效果如图:
此时系统自动识别该文件
接下来使用vant-weapp的组件库,对vant-weapp组件不了解的,
我们引入vant的tabBar标签组件
复制代码,放入文件中的components节点中(局部引入)
按照官方文档,配置js文件的数据和方法,即可基本使用
效果:
接下来我们自定义图标,见官方文档:
还记得slot的用法吗,插槽
在对应的tabbar-item项中直接放入图片,通过插槽slot指定图片是选中状态还是未选中状态在vant的tabbar组件源代码其实是有对于两个插槽接受图片的,如下:
源代码
我们往image
标签的属性src
放置我们图标即可
没有好的图标素材见:图标库素材
效果:
其中info是对改组件的传参,可以动态设定,不需要删掉即可
接下来我们循环生成图标,将我们第一个实例配置tabbar
的list
节点复制到的
data
中,组件通过wx:for
循环list
数组,生成对应图标,
效果:
图片样式可以自己定义style
设置info的值可以在图标上显示 ,但是我们发现改图标会超出范围,如下图
原因很简单,是vant组件样式下有一个margin-bottom导致,我们可以通过设置vant组件的css全局变量设置
在通过外部样式修改组件的内部样式(样式隔离)之前,我们需要设定样式隔离
在父组件配置,修改配置
微信小程序自定义标签 第5篇
将 里的
list
数组放在自定义 tabBar
组件中的 data
数据,然后通过循环渲染到页面上。 注意:此处path必须加前面的/
,否则在切换tabbar时,会自动拼接地址,导致传入url有误,系统没有任何效果
此时可以看到已经成功把 list 数组里的图片都渲染出来了,来看一下运行效果:
详细步骤,可以参考小程序官方给出的 文档 。
通过 van-tabbar-item 上 info 属性可以对 tabBar 渲染数字,具体代码如下所示:
微信小程序自定义标签 第6篇
其实我们都需要配置好tabBar
的,不管是不是自定义都需要在的
tarBar
节点配置,我们可以自定义配置文件可以tarBar
节点配置好完整属性,查看效果在细调,然后我们在创建自定义文件,编写代码,然后将我们刚刚配置的list节点放入 custom-tab-bar
的的
data
中在通过循环遍历改list数据实现效果,这种流程有几个好处
微信小程序自定义标签 第7篇
如果未定义info则为假,不显示,如果为0也为假,也不显示符合我们的开发需求
使用mobx全局共享
思路:mobx绑定全局控制info
在如下配置
绑定sum的值到info
在一开始我是不知道如何同步sum和info的值,甚至想用 组件通信的知识解决(大家都知道组件通信很麻烦),但是忘了组件有一个非常的方法:数据监听器 (behavior
)
a代码解释:在以往赋值时是不需要对赋值对象加上双引号“”
的,但是 list需要索引到 list[1] 由于模板语法需要双引号的形式 'list[1].info' : a
效果如下