脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序tabbar组件

微信小程序自定义tabbar组件

 更新时间：2021年03月14日 10:55:02   作者：赵思远kelsty  
这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序自定义tabbar组件的具体代码，供大家参考，具体内容如下

由于项目需求，必须自己写组件：

第一步：在App.json中配置tabBar,自定也组件也必须配置，"custom": true,list里配置所有的tabbar页面。

 "tabBar": {
 "custom": true,
 "color": "red",
 "selectedColor": "#3b81d7",
 "backgroundColor": "#000000",
 "list": [{
 "pagePath": "pages/Role/InsureIndex/index",
 "text": "首页"
 }, {
 "pagePath": "pages/Role/MineIndex/index",
 "text": "首页"
 }, {
 "pagePath": "pages/index/userInfo/userInfo",
 "text": "我的"
 }]
 },

第二步：在pages的同级目录新建组件，文件夹名字：custom-tab-bar，自定义组件文件名为index。组件代码如下，应该都能看懂。

index.js

Component({
 properties: {},
 
 data: {
 indexImg: "../static/images/tabBar/tab_icon_home_nor@2x.png",
 indexSelectImg: "../static/images/tabBar/tab_icon_home_sel@2x.png",
 aboutUsImg: "../static/images/tabBar/tab_icon_user_nor@2x.png",
 aboutUsSelectImg: "../static/images/tabBar/tab_icon_user_sel@2x.png",
 _tabbat: null,
 iPhoneX: false,
 urls: ['/pages/Role/InsureIndex/index',
 '/pages/index/userInfo/userInfo'
 ]
 },
 attached() {
 var self = this
//此为业务代码，可不看
 wx.getStorage({
 key: 'userInfo',
 success: function (res) {
 const {
  userRoleCode
 } = res.data
 if (userRoleCode == '50' || userRoleCode == '70') {
  self.setData({
  ["urls[0]"]: '/pages/Role/MineIndex/index'
  })
 } else if (userRoleCode == '30' || userRoleCode == '35' || userRoleCode == '40') {
  self.setData({
  ["urls[0]"]: '/pages/Role/InsureIndex/index'
  })
 }
 }
 })
 wx.getSystemInfo({
 success(res) {
 console.log(res.model)
 if (res.model.indexOf('iPhone X') >= 0) {
  self.setData({
  iPhoneX: true
  })
 }
 }
 })
 },
 /**
 * 组件的方法列表
 */
 methods: {
 switchTap: function (e) {
 var self = this
 var index = e.currentTarget.dataset.index;
 var urls = self.data.urls
 wx.switchTab({
 url: urls[index],
 })
 }
 }
})

index.wxml

<div class="_tabbar {{iPhoneX?'_iPhoneX':''}}">
 <div class="titem {{_tabbat==0?'tCdk':''}}" data-index="0" bind:tap="switchTap">
 <image src="{{_tabbat==0?indexSelectImg:indexImg}}" />
 <b>首页</b>
 </div>
 <div class="titem {{_tabbat==1?'tCdk':''}}" data-index="1" bind:tap="switchTap">
 <image src="{{_tabbat==1?aboutUsSelectImg:aboutUsImg}}" />
 <b>我的</b>
 </div>
</div>

index.wxss

._tabbar {
 width: 100%;
 height: 120rpx;
 display: flex;
 align-items: center;
 background: #fff;
 font-size: 26rpx;
 color: #999999;
 box-shadow: 0px -7rpx 13rpx 0px rgba(193, 185, 204, 0.13);
}
 
._tabbar .titem {
 text-align: center;
 width: 50%;
}
 
._tabbar .titem image {
 display: block;
 margin: auto;
 width: 48rpx;
 height: 48rpx;
 margin-bottom: 10rpx;
}
 
._tabbar .tCdk {
 color: #37ADFE;
}
 
._iPhoneX {
 height: 148rpx;
}

index.json

{
 "component": true,
 "usingComponents": {}
}

以上为组件代码，点击tabbar跳转页面时，会重新加载tabbar组件，导致选中样式一直是默认的，因此需要在用到tabbar的页面的js文件中做如下操作：（以 “首页” 页面为例）

onShow: function () {
 this.getTabBar().setData({
 _tabbat: 0
 })
 },

以上就已经完成了，但是看网上大家说会出现两个tabBar,我这边是没出现（一个自定义，一个自带的），如果出现的话，在app.js中的onLaunch函数中加入 wx.hideTabBar() ， 隐藏自带的tabbar就可以了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript实现网页跨年倒计时

    JavaScript实现网页跨年倒计时

    这篇文章主要为大家详细介绍了JavaScript实现网页跨年倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • js匿名函数的调用示例(形式多种多样)

    js匿名函数的调用示例(形式多种多样)

    匿名函数就是没有实际名字的函数，javaScript的匿名函数形式多样，下面就一一为大家罗列出来
    2014-08-08
  • Bootstrap表单Form全面解析

    Bootstrap表单Form全面解析

    在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的。下文给大家介绍Bootstrap表单Form全面解析，感兴趣的朋友一起看下吧
    2016-06-06
  • ie8下修改input的type属性报错的解决方法

    ie8下修改input的type属性报错的解决方法

    当用户勾选显示明文复选框时，要以明文显示用户输入的密码，去掉勾选时要变回密文，问题是ie8中是不允许修改input的type属性
    2014-09-09
  • js实现jquery的offset()方法实例

    js实现jquery的offset()方法实例

    这篇文章主要介绍了js实现jquery的offset()方法,实例分析了jquery的offset()方法原理与采用javascript实现的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • javascript实现表单验证

    javascript实现表单验证

    这篇文章主要介绍了javascript实现表单验证的相关资料，以一个完整的实例对javascript实现表单验证的方法进行分析，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 用JavaScript操作WinRar

    用JavaScript操作WinRar

    Blog的插入HTML功能有誤。 原來在blueidea.com上看到了用ASP執行解壓縮動作的文章，一直沒有去用心看，前日，趁老大不在，爽了一把，把它改成了用JavaScript操作的了。
    2008-04-04
  • JS抛物线动画实例制作

    JS抛物线动画实例制作

    本篇文章给大家详细分析了JS抛物线动画制作过程以及相关的代码实例分享，有兴趣的朋友参考下。
    2018-02-02
  • JS对象数组中如何匹配某个属性值

    JS对象数组中如何匹配某个属性值

    这篇文章主要介绍了JS对象数组中如何匹配某个属性值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • JavaScript出现setTimeout倒计时误差的原因分析

    JavaScript出现setTimeout倒计时误差的原因分析

    setTimeout 倒计时误差的出现主要与 JavaScript 的事件循环机制和计时器的执行方式有关，本文就来和大家讲讲具体出现的原因以及解决方法，需要的可以参考一下
    2023-06-06

最新评论