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

以下代码保存到github地址:https://github.com/shenhuanjie/wechat-app-component-tabbar

实现代码

项目目录

image.png

template文件夹里存放tabbar模板。

template/tabbar/tabbar.wxml

<!--template/tabbar/tabbar.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/tabbar/tabbar.wxss

/* template/tabbar/tabbar.wxss */

.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/tabbar/tabbar.js

//初始化数据
function tabbarinit() {
    return [{
            "current": 0,
            "pagePath": "/pages/index/index",
            "iconPath": "/images/home.png",
            "selectedIconPath": "/images/home_on.png",
            "text": "主页"
        },
        {
            "current": 0,
            "pagePath": "/pages/news/news",
            "iconPath": "/images/message.png",
            "selectedIconPath": "/images/message_on.png",
            "text": "资讯"

        },
        {
            "current": 0,
            "pagePath": "/pages/category/category",
            "iconPath": "/images/category.png",
            "selectedIconPath": "/images/category_on.png",
            "text": "分类"
        },
        {
            "current": 0,
            "pagePath": "/pages/buy/buy",
            "iconPath": "/images/buy.png",
            "selectedIconPath": "/images/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

app.wxss

@import "/template/tabbar/tabbar.wxss";

在index文件夹

pages/index/index.wxml

<!--pages/index/index.wxml-->
<import src="../../template/tabbar/tabbar.wxml" />
<template is="tabBar" data="{{tabBar:bindData.tabBar}}" />

pages/index/index.js

// pages/index/index.js
const app = getApp();
var tabBar = require('../../template/tabbar/tabbar.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    tabBar.tabbar('tabBar', 0, this); //0表示第一个tabbar
  }
})

news.wxml与index.wxml一样

pages/news/news.wxml

<!--pages/news/news.wxml-->
<import src="../../template/tabbar/tabbar.wxml" />
<template is="tabBar" data="{{tabBar:bindData.tabBar}}" />

pages/index/index.js

// pages/news/news.js
const app = getApp();
var tabBar = require('../../template/tabbar/tabbar.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    tabBar.tabbar('tabBar', 1, this); //1表示第一个tabbar
  }
})

效果如图

image.png


原文地址: 微信小程序自定义tabBar组件开发

评论 (1)

  • 匿名| 2018年11月30日

    代码展示存在流畅性问题,如果对用户体验要求不高的话可是使用,这种实现方案。

  • 发表评论

    电子邮件地址不会被公开。