微信小程序自定义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实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
微信支付开发告警通知实例
2016/07/12 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
javaScript封装的各种写法
2017/08/14 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
网上书店创业计划书
2014/01/12 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
网络营销计划
2015/01/17 职场文书
学校捐书倡议书
2015/04/27 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
学校少先队工作总结
2015/08/12 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android