微信小程序自定义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 相关文章推荐
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 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
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
JS 遮照层实现代码
2010/03/31 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
node.js通过url读取文件
2020/10/16 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python作用域用法实例详解
2016/03/15 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
python实现四人制扑克牌游戏
2020/04/22 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
幼儿园感恩节活动方案2014
2014/10/11 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
检讨书大全
2015/01/27 职场文书
商务代表岗位职责
2015/02/15 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript