微信小程序自定义tabBar组件开发
2017-12-29 17:36
1246 查看
以下代码保存在github地址:https://github.com/kristen154/tabbar
先看一看目录
template文件夹里存放tabbar模板。
template/template.wxml
template.css
template.js
到此改组件完成,然后讲解一下使用方法。
我们先把样式载入到app.wxss
在index文件夹
index.wxml
index.js
news.wxml与index.wxml一样
news.js如下
效果如图
先看一看目录
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 }, })
效果如图
相关文章推荐
- 微信小程序开发《11 .框架之自定义组件》
- 微信小程序开发之自定义tabBar的实现
- 开发 | 手把手教你实现微信小程序中的自定义组件
- 手摸手教你微信小程序开发之自定义组件
- 微信小程序实用小组件:自定义tabbar
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
- 微信小程序开发学习笔记005--微信小程序组件详解
- 在webstorm开发微信小程序之使用阿里自定义字体图标
- 微信小程序开发—(十四)表单组件1
- 微信小程序源码大集005----微信小程序开发之视频播放器带弹幕Video弹幕颜色自定义(有图有源码)
- 微信小程序 自定义tabBar
- 微信小程序自定义select下拉选项框组件的实现代码
- 微信小程序之自定义组件
- 微信小程序开发详解(四)---微信小程序开发组件使用初步
- 微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
- 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义
- 微信小程序开发教程之组件
- 踩一踩微信小程序开发的坑---tabBar