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

1.新建template文件夹用于保存tabBar模板,template/template.wxml

  1. <template name="tabBar">
  2. <view class="tabBar">
  3. <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
  4. <view class="tabBar-item">
  5. <navigator open-type="reLaunch" url="{{item.pagePath}}">
  6. <view><image class="icon" src='{{item.iconPath}}'></image></view>
  7. <view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
  8. </navigator>
  9. </view>
  10. </block>
  11. </view>
  12. </template>

2.创建template.wxss

  1. .icon{
  2. width:54rpx;
  3. height: 54rpx;
  4. }
  5. .tabBar{
  6. width:100%;
  7. position: fixed;
  8. bottom:0;
  9. padding:10rpx;
  10. margin-left:-4rpx;
  11. background:#F7F7FA;
  12. font-size:24rpx;
  13. color:#8A8A8A;
  14. box-shadow: 3rpx 3rpx 3rpx 3rpx #aaa;
  15. z-index: 9999;
  16. }
  17. .tabBar-item{
  18. float:left;
  19. width:20%;
  20. text-align: center;
  21. overflow: hidden;
  22. }
  23. /*当前字体颜色*/
  24. .tabBartext{
  25. color:red;
  26. }
  27. .navigator-hover{
  28. background-color: rgba(0, 0, 0, 0);
  29. }

3.创建template.js,初始化数据

  1. //初始化数据
  2. function tabbarinit() {
  3. return [
  4. {
  5. "current": 0,
  6. "pagePath": "/pages/dashboard/index",
  7. "iconPath": "/images/goback.png",
  8. "text": "返回商城"
  9. },
  10. {
  11. "current": 0,
  12. "pagePath": "/pages/collage/index",
  13. "iconPath": "/images/collage1.png",
  14. "selectedIconPath": "/images/collage.png",
  15. "text": "拼团首页"
  16. },
  17. {
  18. "current": 0,
  19. "selectedIconPath": "/images/list.png",
  20. "iconPath": "/images/list1.png",
  21. "pagePath": "/pages/collage-list/index",
  22. "text": "活动列表"
  23. },
  24. {
  25. "current": 0,
  26. "selectedIconPath": "/images/collage-order.png",
  27. "iconPath": "/images/collage-order1.png",
  28. "pagePath": "/pages/collage-order/index",
  29. "text": "我的订单"
  30. },
  31. {
  32. "current": 0,
  33. "selectedIconPath": "/images/group.png",
  34. "iconPath": "/images/group1.png",
  35. "pagePath": "/pages/group/index",
  36. "text": "我的团"
  37. }
  38. ]
  39. }
  40. //tabbar 主入口
  41. function tabbarmain(bindName = "tabdata", id, target) {
  42. var that = target;
  43. var bindData = {};
  44. var otabbar = tabbarinit();
  45. otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon
  46. otabbar[id]['current'] = 1;
  47. bindData[bindName] = otabbar
  48. that.setData({ bindData });
  49. }
  50. module.exports = {
  51. tabbar: tabbarmain
  52. }

4.使用方法

  • 先把样式文件载入app.wxss
  1. @import "/template/template.wxss";
  • 新建一个页面,比如index.wxml,引入模板
  1. <import src="../../template/template.wxml"/>
  2. <template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>
  • index.js 初始化数据
  1. var template = require('../../template/template.js');
  2. Page({
  3. onLoad: function () {
  4. template.tabbar("tabBar", 0, this)//0表示第一个tabbar
  5. this.getData();
  6. },
  7. })
  • 其它新建页面也跟index.wxml一样,初始化数据。

效果如图



评论 3

发表评论


a

aaaaasssxs

aasxsxsxsx

5年前 · 台湾 XX


搜索

三生三世

5年前 · 江苏 南京

Top