欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-20 08:11:42
本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下 以下代码保存在 先看一看目录   template文件夹里存放t...

本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下

以下代码保存在

先看一看目录

 微信小程序自定义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组件开发详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。