微信小程序自定义tabbar的实现

目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果;当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置。

方案:自己动手写一个和微信小程序提供的tabbar相同的效果,而且还可以满足灵活配置的功能.有参照有赞小程序

效果:

  1. 效果A:

2.效果B:

实现:

             项目结构如下:

       

            II 效果A实现:

1》wxml的代码:

Page({
data: {
blockid:0,
bgcolor:'#ffffff',
color:"#cccccc",
selectedColor:'#333333',
showborder:false,
bordercolor:"",
tabbar:[
{
pagePath: "page/home0/index",
selectedIconPath: '/resources/tabbar/homeh.png',
iconPath: '/resources/tabbar/home.png',
text: '首页A',
isdot: false,
number: 0
}, {
pagePath: "page/home1/index",
selectedIconPath: '/resources/tabbar/kindh.png',
iconPath: '/resources/tabbar/kind.png',
text: '首页B',
isdot: true,
number: 0
}, {
pagePath: "page/home2/index",
selectedIconPath: '/resources/tabbar/myh.png',
iconPath: '/resources/tabbar/my.png',
text: '首页C',
isdot: false,
number: 5
}, {
pagePath: "page/home3/index",
selectedIconPath: '/resources/tabbar/shopcarth.png',
iconPath: '/resources/tabbar/shopcart.png',
text: '首页D',
isdot: false,
number: 0
}
]
},
// event.detail 的值为当前选中项的索引
tabbarChange(e) { var index = parseInt(e.detail);
this.setData({
blockid:index
})
}
})

2》json文件如下:

{
"usingComponents": {
"tabbar": "../../components/tabbar/index"
}
}
          3》js文件如下:

Page({
data: {
blockid:0,
bgcolor:'#ffffff',
color:"#cccccc",
selectedColor:'#333333',
showborder:false,
bordercolor:"",
tabbar:[
{
pagePath: "page/home0/index",
selectedIconPath: '/resources/tabbar/homeh.png',
iconPath: '/resources/tabbar/home.png',
text: '首页A',
isdot: false,
number: 0
}, {
pagePath: "page/home1/index",
selectedIconPath: '/resources/tabbar/kindh.png',
iconPath: '/resources/tabbar/kind.png',
text: '首页B',
isdot: true,
number: 0
}, {
pagePath: "page/home2/index",
selectedIconPath: '/resources/tabbar/myh.png',
iconPath: '/resources/tabbar/my.png',
text: '首页C',
isdot: false,
number: 5
}, {
pagePath: "page/home3/index",
selectedIconPath: '/resources/tabbar/shopcarth.png',
iconPath: '/resources/tabbar/shopcart.png',
text: '首页D',
isdot: false,
number: 0
}
]
},
// event.detail 的值为当前选中项的索引
tabbarChange(e) { var index = parseInt(e.detail);
this.setData({
blockid:index
})
}
})

        III效果B实现:

1》wxml的代码:

<block wx:if="{{blockid==0}}">
这里是首页A
</block>
<block wx:if="{{blockid==1}}">
这里是首页B
</block>
<block wx:if="{{blockid==2}}">
这里是首页C
</block>
<block wx:if="{{blockid==3}}">
这里是首页D
</block> <!--底部tabbar【一般正常用法,index页面特殊用法】-->
<tabbar tabbarData="{{tabbar}}" active="{{0}}" bgcolor="{{bgcolor}}" color="{{color}}" selectedColor="{{selectedColor}}" showborder="{{showborder}}" bind:tapChange="tabbarChange" />

2》json的代码

{
"usingComponents": {
"tabbar": "../../components/tabbar/index"
}
}

3》js的代码

Page({

  /**
* 页面的初始数据
*/
data: {
blockid: 0,
bgcolor: 'green',
color: "red",
selectedColor: 'blue',
showborder: false,
bordercolor: "",
tabbar: [{
pagePath: "page/home0/index",
selectedIconPath: '/resources/tabbar/homeh.png',
iconPath: '/resources/tabbar/home.png',
text: '首页A',
}, {
pagePath: "page/home1/index",
selectedIconPath: '/resources/tabbar/kindh.png',
iconPath: '/resources/tabbar/kind.png',
text: '首页B',
}, {
pagePath: "page/home2/index",
selectedIconPath: '/resources/tabbar/myh.png',
iconPath: '/resources/tabbar/my.png',
text: '首页C',
}, {
pagePath: "page/home3/index",
selectedIconPath: '/resources/tabbar/shopcarth.png',
iconPath: '/resources/tabbar/shopcart.png',
text: '首页D',
}]
},
// event.detail 的值为当前选中项的索引
tabbarChange(e) { var index = parseInt(e.detail);
this.setData({
blockid: index
})
},
})

github地址如下:https://github.com/weiyunhelong/WeChatTabbar,欢迎下载并使用!

微信小程序自定义tabbar的实现的更多相关文章

  1. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  2. 微信小程序自定义tabbar的问题

    个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...

  3. 微信小程序 自定义tabbar实例

    在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...

  4. 微信小程序自定义TabBar

    项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...

  5. 微信小程序 - 自定义tabbar

    更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...

  6. 微信小程序 - 自定义tabbar(组件)

    配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...

  7. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  8. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  9. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

  1. HttpClient忽略SSL证书

    今天公司项目请求一个接口地址是ip格式的,如:https://120.20.xx.xxx/xx/xx,报一个SSL的错: 由于之前请求的接口地址都是域名地址,如:https://www.xxx.com ...

  2. jsp页面格式化时间 fmt:formatDate格式化日期

    使用fmt函数需在jsp中引入 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" ...

  3. Shell命令-用户用户组管理之visudo、sudo

    文件及内容处理 - visudo.sudo 1. visudo:编辑/etc/sudoers文件的专属命令 visudo命令的功能说明 visudo命令专门用来编辑/etc/sudoers这个文件的. ...

  4. 在Rust中使用C语言的库功能

    主要是了解unsafe{}语法块的作用. #[repr(C)] #[derive(Copy, Clone)] #[derive(Debug)] struct Complex { re: f32, im ...

  5. c# 第26节 Main方法

    本节内容: 1:Main方法 2:Main方法的定义 3:测试Main函数传入参数 4:Main的大总结 1:Main方法是什么 2:Main方法的定义 3:测试打印出外部传入Main的参数 clas ...

  6. mysql 导入sql文件的几种形式

    1.没有登陆mysql的时候以文件的形式导入mysql数据 在students.sql文件中加入这些语句 create table t_student( id int primary key auto ...

  7. django-订单并发处理--悲观锁和乐观锁

    冲突比较少的时候,使用乐观锁. 冲突比较多的时候,使用悲观锁. (1)     悲观锁 select * from df_goods_sku where id=17 for update; 悲观锁获取 ...

  8. Paper | Densely Connected Convolutional Networks

    目录 黄高老师190919在北航的报告听后感 故事背景 网络结构 Dense block DenseNet 过渡层 成长率 瓶颈层 细节 实验 发表在2017 CVPR. 摘要 Recent work ...

  9. Vue中MVVM模式的双向绑定原理 和 代码的实现

      今天带大家简单的实现MVVM模式,Object.defineProperty代理(proxy)数据   MVVM的实现方式: 模板编译(Compile) 数据劫持(Observer) Object ...

  10. 从应用到内核,分析top命令显示的进程名包含中括号"[]"的含义

    背景 在执行top/ps命令的时候,在COMMAND一列,我们会发现,有些进程名被[]括起来了,例如 PID PPID USER STAT VSZ %VSZ %CPU COMMAND 1542 928 ...