微信小程序自定義tabBar組件開發詳解

2020-03-21 16:07:30

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了微信小程序自定義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,組件開發,小程序開發