1,前言

分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮。懒得看文字的可以直接去底部,博主分享了小程序代码片段和GitHub地址。

2,说明

由于微信小程序自带的Tabber功能比较单一,比如要做到中间是一个突出的圆形扫一扫按钮,就需要自定义Tabber了。

博主创建了一个Tabber组件,自己写的样式,在需要用到的页面引入组件。

组件使用了position: fixed定位到底部,所以在用到组件的页面,需要给page加上margin-bottom样式。

交互是通过在组件上定义的bindtap事件,来进行跳转页面或者触发功能模块,其中路由跳转是用的wx.switchTab。事件以及传参可以通过triggerEvent

3,核心代码

文件目录

引用组件

//在页面json中
{
"usingComponents": {
"Tabber":"../../components/tabber/tabber"
}
}
//在wxml中
<Tabber nowIndex="0" bind:switchDialog="switchDialog"/>

组件的data

data: {
tabberList:[
{
index:0,
pagePath:'../index/index',
title:"首页",
icon: "../../images/home.png",
onIcon: "../../images/home1.png",
color: "#9B9B9B",
onColor: "#19C29C",
},
{
index:1,
pagePath:'',
icon: "../../images/look.png",
onIcon: "../../images/look.png",
},
{
index:2,
pagePath:'../userCenter/userCenter',
title:"个人中心",
icon: "../../images/my.png",
onIcon: "../../images/my1.png",
color: "#9B9B9B",
onColor: "#19C29C",
}
],
}

组件的路由跳转

// 切换
changePage(e){
let { path,index } = e.currentTarget.dataset;
if(index === 1){
this.chickLook();
return false;
};
wx.switchTab({
url: path
});
}

小程序代码片段

GitHub源码


如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;

END

往期文章

个人主页

微信小程序自定义Tabber,附详细源码的更多相关文章

  1. 微信小程序商城 带java后台源码

    微信小程序商城(Java版) 演示地址 账号:admin 密码:admin 小程序体验码: 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 myb ...

  2. 微信小程序实现左滑删除源码

    左滑删除效果在app的交互方式中十分流行,比如全民应用微信 微信左滑删除 再比如曾引起很大反响的效率app Clear Clear左滑删除 从技术上来说,实现这个效果并不困难,响应一下滑动操作,移动一 ...

  3. 微信小程序支付,带java源码

    先说下这个的背景吧... 本人是做java后端的,自认为还有很大的发展空间(嘻嘻,你懂的),看过一段时间的小程序可是没有支付成功...最近公司要做小程序项目,老大让我看下小程序,折腾了好几天,参照着h ...

  4. 微信小程序 - 反编译线上源码

    github地址:https://github.com/qwerty472123/wxappUnpacker 不过我好像从来未成功过哈,TX地图+.TX公交都失败了 点击下载以上两个文件 哦,对了,你 ...

  5. 微信小程序自定义 tabbar

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

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

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

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

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

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

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

  9. 利用python实现微信小程序游戏跳一跳详细教程

    利用python实现微信小程序游戏跳一跳详细教程 1 先安装python 然后再安装pip <a href="http://newmiracle.cn/wp-content/uploa ...

随机推荐

  1. Codeforces Round #667 (Div. 3) B. Minimum Product (贪心,数学)

    题意:给你\(a\)和\(b\)两个数,每次操作可以是任意一个数\(-1\),最多操作\(n\),并且\(a\ge x\),\(b\ge y\),求操作后\(a*b\)的最小值. 题解:观察样例并且在 ...

  2. hutool学习总结

    1. 为什么要学习Hutool的使用 Hutool官网 中文写的已经很清楚了 Hutool是一款强力的工具类.封装了工作开发中一些常见的功能操作.避免重复造轮子,使用它大大提高的开发效率. 2. Hu ...

  3. 国产网络损伤仪 SandStorm -- 只需要拖拽就能删除链路规则

    国产网络损伤仪SandStorm可以模拟出带宽限制.时延.时延抖动.丢包.乱序.重复报文.误码.拥塞等网络状况,在实验室条件下准确可靠地测试出网络应用在真实网络环境中的性能,以帮助应用程序在上线部署前 ...

  4. 二进制安装kubernetes(七) 部署知识点总结

    1.k8s各个组件之间通信,在高版本中,基本都是使用TSL通信,所以申请证书,是必不可少的,而且建议使用二进制安装,或者在接手一套K8S集群的时候,第一件事情是检查证书有效期,证书过期或者TSL通信问 ...

  5. 加密后的程序在Win8中无法运行

    需要使用dotNET_Reactor 4.7以上的版本加密后才能在Win8中使用.

  6. C# 类 (5)

    Static 静态成员 创建一个类,实例化它,然后使用实例的各种方法或者属性 然而有时候我们不想实例化这个类,难道我们就没法用他里面的成员了吗?比如计算矩形的面积,就是长*宽,万年不变 当然可以,用s ...

  7. Next.js 10

    Next.js 10 October 27th 2020 https://nextjs.org/blog/next-10 refs xgqfrms 2012-2020 www.cnblogs.com ...

  8. HTTP cache in depth

    HTTP cache in depth HTTP 缓存 https://developers.google.com/web/fundamentals/performance/optimizing-co ...

  9. D language

    D language https://en.wikipedia.org/wiki/D_(programming_language) Dart https://dlang.org/ flutter fr ...

  10. js 检测浏览器开发者控制台是否被打开

    var element = new Image(); Object.defineProperty(element, "id", { get: function () { debug ...