微信小程序自定义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.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
angular4实现带搜索的下拉框
Mar 25 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开发模式(简写版)
2007/03/15 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
JS 控制CSS样式表
2009/08/20 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
初步讲解Python中的元组概念
2015/05/21 Python
python中hashlib模块用法示例
2017/10/30 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python list转置和前后反转的例子
2019/08/26 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
售后主管岗位职责
2013/12/08 职场文书
大学毕业感言100字
2014/02/03 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android