微信小程序自定义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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP新手上路(四)
2006/10/09 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
将相和教学反思
2014/02/04 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
标准单位租车协议书
2014/09/23 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
党员评议个人总结
2014/10/20 职场文书
免职证明样本
2014/10/23 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
运动会加油稿50字
2015/07/21 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书