微信自定义tabbar有小红点_微信小程序自定义 tabbar

一定的需求情况下，无法使用小程序原生的 tabbar 的时候，需要自行实现一个和 tabbar 功能一模一样的自制组件。

查阅了海量的博客和文档之后，亲自踩坑。总结了三种在不使用微信小程序原生 tabbar的情况下自制 tabbar 的方法。并说说这几种方法各自的特色。

类 navigator 跳转方式

类 navigator 跳转方式是我自己起的名称，因为它的实现思路就是这个样子的。期初参考微信小程序自定义tabBar组件开发这篇博文的思路。进行了这种方式的尝试，并为后续提供了解决思路。在这次实践的过程中使用了和该博文类似的目录结构。

template 文件主要包含了 tabbar 的内容、逻辑、模板、样式。

tabbar_template.js

//初始化数据

functiontabbarinit() {return[

{"current": 0,"pagePath": "/pages/travel_shop/travel/travel_index/travel_index","iconPath": "/pages/img/tab_icon_home@2x.png","selectedIconPath": "/pages/img/tab_icon_home_sel@2x.png","text": "首页"},

{"current": 0,"pagePath": "/pages/travel_shop/travel/travel_car/travel_car","iconPath": "/pages/img/tab_icon_shop@2x.png","selectedIconPath": "/pages/img/tab_icon_shop_sel@2x.png","text": "购物车"},

{"current": 0,"pagePath": "/pages/travel_shop/travel/travel_my/travel_my","iconPath": "/pages/img/tab_icon_my@2x.png","selectedIconPath": "/pages/img/tab_icon_my_sel@2x.png","text": "我的"}

]

}//tabbar 主入口

function tabbarmain(bindName = "tabdata", id, target) {var that =target;var bindData ={};var otabbar =tabbarinit();

otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath'] //换当前的icon

otabbar[id]['current'] = 1;

bindData[bindName]=otabbar

that.setData({ bindData });

}

module.exports={

tabbar: tabbarmain

}

tabbar_template.wxml

tabbar_template.wxss

.tabBar-icon{width:54rpx;height:54rpx;

}.tabBar{width:100%;position:fixed;bottom:0;padding:10rpx;margin-left:-4rpx;background:#F7F7FA;font-size:24rpx;color:#8A8A8A;box-shadow:3rpx 3rpx 3rpx 3rpx #aaa;z-index:9999;

}.tabBar-item{float:left;width:33.333%;text-align:center;overflow:hidden;

}

/*当前字体颜色*/.tabBartext{color:black;

}.navigator-hover{background-color:rgba(0, 0, 0, 0);

}

而后在全局引入样式

@import "/pages/travel_shop/travel/tabbar_template/tabbar_template.wxss";

并在每一个页面的子文件(wxml、JS)中引入相应的内容

wxml 引入

JS 引入

var template = require("../tabbar_template/tabbar_template.js");

并在对应的 onLoad 生命周期中，注明它是哪一个 tabbar

onLoad: function(options) {

template.tabbar("tabBar", 1, this) //0表示第一个tabbar，这里1表示第二个 tabbar 的 icon

效果预览

我们最终得到了效果，但这种效果带了明显的抖动闪烁。原因则是因为这种实现方式的本质是通过 navigator 和 JS 事件触发实现页面之间的跳转。因此我开始找寻另一种实现的方式。在微信小程序自定义tabBar组件开发这篇博客的留言板，我发现该文的作者也发现了这种方式的不足，并提到可以通过可以把页面都写成组件 component 的方式实现更好的效果。

template 模板 / component 组件

在继续查阅了一些关于小程序自定义 tabbar 的博客之后，找到了微信小程序 - 自定义tabbar 这篇博文。按照这篇博文描述的结构，我也进行了尝试。发现这种方式不会出现之前跳转产生的那种闪烁现象出现。

之后再查阅微信小程序 template 模板与 component 组件的区别和使用这篇博文的时候了解到，如果当我们主要是为了展示页面的时候，可以使用 template 方式。如果涉及到 tabbar 对应各个页面的业务逻辑交互比较多，那就最好使用 component 组件。

因为这三个页面涉及到了很多独立的交互，所以我决定使用 component 组件的形式，将自定义的 tabbar 写成一个页面，然后将其他三个 tabbar 按钮对应的页面写成三个 component 组件。这种方法和 Vue 中的组件化很相似，可以把单个组件文件夹当成 Vue 中的一个 .vue 文件。

component 与普通 page 类似，但是 JS 文件和 JSON 文件与页面不同。

小程序组件 JS 模板

Component({/*开启全局样式使用*/options: {

addGlobalClass:true,

},/*组件的属性列表*/properties: {

name: {

type: String,

value:''}

},/*组件的初始数据*/data: {

},/*生命周期函数*/lifetimes: {

attached:function() { },

moved:function() { },

detached:function() { },

},/*组件的方法列表*/methods: {

})

component 组件 JSON 文件

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

}

tabbar 引用和配置

引用组件 JSON

按照如图的结构，三个 component 作为子组件，tabber 作为一个父级，因此它的 JSON 需要引入这三个 component 组件。

//travel.json

{"usingComponents": {"travel_car": "travel_car/travel_car","travel_index": "travel_index/travel_index","travel_my": "travel_my/travel_my"}

}

tabbar JS

而该页面的 JS 仅仅只用来控制 tabbar 的 icon 选择，和传递一个 index 告诉页面该隐藏和显示哪一个 component 组件。

//travel.js

let app =getApp()

Page({

data: {

currentTab:0,

items: [

{"iconPath": "/pages/img/tab_icon_home@2x.png","selectedIconPath": "/pages/img/tab_icon_home_sel@2x.png","text": "首页"},

{"iconPath": "/pages/img/tab_icon_shop@2x.png","selectedIconPath": "/pages/img/tab_icon_shop_sel@2x.png","text": "购物车"},

{"iconPath": "/pages/img/tab_icon_my@2x.png","selectedIconPath": "/pages/img/tab_icon_my_sel@2x.png","text": "我的"}

]

},//事件处理函数

bindChange: function(e) {

let that= this;

that.setData({

currentTab: e.detail.current

});

swichNav:function(e) {

let that= this;if (this.data.currentTab ===e.target.dataset.current) {return false;

}else{

that.setData({

currentTab: e.target.dataset.current

})

}

onLoad:function() {

let that= thisapp.getUserInfo(function(userInfo) {

that.setData({

userInfo: userInfo

})

}

})

tabbar WXML

直接使用之前 JSON 中引用过的标签名，类似于 Vue 中使用模板标签。这里由于组件模板标签不支持直接使用 hidden 属性，所以在外包裹了一层 view 标签用来添加 hidden属性。

tabbar WXSS

Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./pages/xxx/xxx.wxss:288:3)This wxss file is ignored.

造成这种报错的原因是 component 组件的样式中不能包含一些特定的选择器。

page{display:flex;flex-direction:column;height:100%;

}.nav-tabs{width:100%;display:flex;position:fixed;bottom:0;

}.tab-list{display:flex;align-items:center;justify-content:center;flex-direction:column-reverse;background:#fcfcfc;

}.tab-text{font-size:24rpx;line-height:35rpx;color:#5f5f5f;

}.iconPath{width:54rpx;height:54rpx;

}.tab-content{flex:1;

}.default{line-height:75rpx;text-align:center;flex:1;color:#eee;font-weight:bold;font-size:28rpx;

}.active{line-height:75rpx;text-align:center;color:black;flex:1;font-weight:bold;font-size:28rpx;

}.show{display:block;flex:1;

}.hidden{display:none;flex:1;

}

预览效果

最终就完成了一个非原生小程序 tabbar 的自定义 tabbar 。

Github

在这篇文章发布之后，有一些朋友询问。我重新整理了一个比较清晰整洁的 Demo 发布在了 GitHub。

如果这个 Demo 能够帮助到您。请不要吝惜您的 Star

微信自定义tabbar有小红点_微信小程序自定义 tabbar相关推荐

爬虫爬评书吧_爬虫 + 小程序自定义开发一个听书程序
最近工作之余会听听评书,但主流门户收费加广告着实让人烦躁.作为IT人,怎能如此顺应别人家的产品规则. 下面以 python + taro 为例,写一个爬虫 + 小程序的播放应用: 最终实现的效果如下: ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...
微信小程序自定义组件：带未读数目的tabBar按钮(小红点+带未读数目)
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1046&extra=page%3D1%26filter%3Dtypei ...
微信小程序自定义菜单tabbar后初次进入小程序会出现两个tabbar
微信小程序自定义tabbar后,初次进去小程序会出现aap.json中配置的tabbar同时也会出现自定义的tabbar,当关闭小程序在此进入就好了只显示自定义tabbar 解决办法就是在小程序初次进 ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
微信小程序进度条样式_详解微信小程序——自定义圆形进度条
微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: 页面初始化 options为页面跳转所带来的参数 ...
微信小程序自定义顶部nav 和底部tabbar
文章目录一.微信小程序自定义Nav: 1.首先在小程序app.json中添加 `"navigationStyle": "custom"`来标志自定义导航栏: ...

微信自定义tabbar有小红点_微信小程序自定义 tabbar

微信自定义tabbar有小红点_微信小程序自定义 tabbar相关推荐

最新文章

热门文章