微信小程序自定义tabBar组件开发

8人阅读 评论(0) 收藏 举报
分类:

先看一看目录 
这里写图片描述 
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
  },

})

效果如图 
这里写图片描述

查看评论

微信小程序项目实战

微信小程序开发,从工具使用到项目实战,配合企业实际应用场景,包含的课程有本地存储,网络请求,项目架构等课程
  • 2016年09月26日 22:43

微信小程序实例:编写tabBar模板

众所周知,微信小程序的tabBar都是新开页面的,而微信文档上又表明了最多只能开打开5层页面。这样就很容易导致出问题啦,加入我的tabBar有5个呢?下面是微信原话: 一个应用同时只能打开5个页面,当...
  • eadio
  • eadio
  • 2017-01-13 18:50:33
  • 13094

微信小程序自定义tabbar

原文地址:http://www.wxapp-union.com/article-1405-1.html 1.创建wxml模板 ...
  • kincaid_z
  • kincaid_z
  • 2017-10-30 17:08:49
  • 3344

微信小程序实用小组件:自定义tabbar

微信小程序 自定义tabbar 创建wxml模板 template name="tabbar"> view class="tabbar_box" style="backgr...
  • yelin042
  • yelin042
  • 2017-05-11 16:29:21
  • 490

微信小程序把玩(三)tabBar底部导航

tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项主要属性:对于tabBar整体属性设置:对于tab...
  • u014360817
  • u014360817
  • 2016-09-24 12:28:34
  • 64365

关于微信小程序动态改变底部导航栏问题

如何在小程序的不同页面显示不同的底部导航
  • AlertQian
  • AlertQian
  • 2017-05-12 10:48:26
  • 9839

微信小程序tabBar

小程序 tabBar
  • hjd199464
  • hjd199464
  • 2017-08-29 16:10:57
  • 249

微信小程序入门四: 导航栏样式、tabBar导航栏

实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置小程序的导航栏样式在app.json中定义。这里设置导航,背景黑色,文字白色,文字内容测试小程序app.json内容:{ "pa...
  • lecepin
  • lecepin
  • 2017-01-12 20:15:35
  • 41339

微信小程序之底部导航栏——tabBar

微信的开发文档里有,很多人也写了,自己写一遍,加深印象罢! 在学习Android的时候,被模仿一个app的界面,实现其UI。而一般来说,总是避免不了导航栏的。 比较大众化的,就是底部导航栏啦,...
  • champion0324
  • champion0324
  • 2017-09-23 13:55:55
  • 874

微信小程序 (3 tabBar及 页面跳转)

上篇文章完成了 home 页面的构建和跳转,这篇文章将会完成底部tabBar 以及点击每个 tabBar 跳转到对应的页面。完成如图:1、 新增 cart discounts my 页面按照 hom...
  • starleejay
  • starleejay
  • 2017-12-19 11:23:00
  • 1545