微信小程序自定义tabBar组件开发详解


Posted in Javascript onSeptember 24, 2020

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

以下代码保存在github地址

先看一看目录

微信小程序自定义tabBar组件开发详解

template文件夹里存放tabbar模板。

template/template.wxml

<template name="tabBar">
<view class="tabBar">
 <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
 <view class="tabBar-item">
 <navigator open-type="redirect" url="{{item.pagePath}}">
 <view><image class="icon" src='{{item.iconPath}}'></image></view>
 <view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
 </navigator> 
 </view>
 </block>
</view>
</template>

template.css

.icon{
 width:54rpx;
 height: 54rpx;
}
.tabBar{
 width:100%;
 position: fixed;
 bottom:0;
 padding:10rpx;
 margin-left:-4rpx;
 background:#F7F7FA;
 font-size:20rpx;
 color:#8A8A8A;
 box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;
}

 .tabBar-item{
 float:left;
 width:25%;
 text-align: center;
 overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
 color:red;
}

template.js

//初始化数据
function tabbarinit() {
 return [
 { "current":0,
 "pagePath": "/pages/index/index",
 "iconPath": "/imgs/home.png",
 "selectedIconPath": "/imgs/home_on.png",
 "text": "主页"
 },
 {
 "current": 0,
 "pagePath": "/pages/news/news",
 "iconPath": "/imgs/message.png",
 "selectedIconPath": "/imgs/message_on.png",
 "text": "资讯"

 },
 {
 "current": 0,
 "pagePath": "/pages/category/category",
 "iconPath": "/imgs/category.png",
 "selectedIconPath": "/imgs/category_on.png",
 "text": "分类"
 },
 {
 "current": 0,
 "pagePath": "/pages/buy/buy",
 "iconPath": "/imgs/buy.png",
 "selectedIconPath": "/imgs/buy_on.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
}

到此改组件完成,然后讲解一下使用方法。
我们先把样式载入到app.wxss

@import "/template/template.wxss";

在index文件夹

index.wxml

<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

index.js

const app = getApp()
var template = require('../../template/template.js');
Page({
 data: {

 },
 onLoad: function () {
 template.tabbar("tabBar", 0, this)//0表示第一个tabbar
 },
})

news.wxml与index.wxml一样
news.js如下

const app = getApp()
var template = require('../../template/template.js');
Page({
 data: { },

 onLoad: function () {
 template.tabbar("tabBar", 1, this)//1表示第二个tabbar
 },

})

效果如图

微信小程序自定义tabBar组件开发详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
js实现日期级联效果
Jan 23 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
webpack的pitching loader详解
Sep 23 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
Vue递归实现树形菜单方法实例
Nov 06 #Javascript
electron中使用bootstrap的示例代码
Nov 06 #Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 #Javascript
浅谈Vue数据响应思路之数组
Nov 06 #Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 #Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 #Javascript
微信小程序实现选项卡效果
Nov 06 #Javascript
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
常用js脚本
2006/12/03 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
javascript中this指向详解
2016/04/23 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python Selenium参数配置方法解析
2020/01/19 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
会计自我鉴定
2013/11/02 职场文书
中学自我评价
2014/01/31 职场文书
护士自我评价
2014/02/01 职场文书
高中教师个人工作总结
2015/02/10 职场文书
送达通知书
2015/04/25 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL