关于自定义小程序tab

之前开发小程序,用的都是官方自带的在app.json里面配置好的tab,如果想添加点花样需要,就需要自定义,于是就上网上找了案例,自己试了一下。极简的自定义tab切换,并没有往下深究,可能会有漏洞,在此先记录一下。


自定义版-首页


日志

  样式未调整,但可以点击切换

下面是代码

根据微信官方文档,https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html  的使用流程来,

1。先新建一个名为custom-tab-bar的文件夹(必须叫这个名字),里面的页面名称为index,一定得是index,否则无效;

2.app.json文件中tarbar里面写上:"custom": true,此时,页面将不再显示tabbar;

3.app.ison文件中添加: 

 "usingComponents": {

    "customtabbar":"custom-tab-bar/index"

  },跟tabBar同级,图片如下:


app.json

注意:虽然这里是自定义的tabBar,但是这里的list还要写,起配置内容要和自定义的内容相符

下面就来说说custom-tab-bar文件夹

此文件夹的内容与平常的文件夹并无差别,有四个文件组成,

wxml:里面放的是你的tab,当然,你也可以写成一个数组循环他


wxml文件

js:里面放一些逻辑


js

wxss:就是你想给你的tab什么样的样式;

json:目前测试阶段没用着;

就这样一个简单的自定义tab就好了。

简单总结一下:

···· 新建一个custom-tab-bar的文件(必须叫这个),是自定义的tab,样式及所有操作都在里面;

···· app.json里面添加两个属性:"custom": true,和 "usingComponents": {

    "customtabbar":"custom-tab-bar/index"

  },

如果想要有点击更换图片或颜色的效果,可以提前在app.json文件里配好,直接复制到custom-tab-bar下面的index中,循环它再做一些逻辑判断。

潦草的自定义tab就好了,等到真是开发中,完善了,在贴出完整的代码

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容