微信小程序 自定义tabbar

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 自定义tabbar相关的知识,希望对你有一定的参考价值。

参考技术A 官网地址:
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1.在根目录下设置文件夹custom-tab-bar,内容放进去;
2.app.json问价中,tabbar配置custom为true;且list中将几个pagePath都得写好,不然将来wx.switchTab时会报错;
3.第一步中复制的内容,将cover的容器全部换成view,cover-image换成view背景图片为base64,不然切换页面会闪动;
4.每个tab页面中需要在onShow方法中设置:

还是会闪。。目前问题没有解决。。。。。。不要用!

微信小程序自定义tabBar

近期做个微信小程序项目,因项目设计需要,所以要做成自定义的tabBar才能实现设计效果图,具体效果如下图:

其中扫码买单,这个按钮效果,微信自带的tabBar是无法实现的,其后尝试了下custom-tab-bar 也是无法实现。

没办法了,既然微信的tabBar无法实现。那就自己弄个真-自定义tabBar来实现好了。

各位看官莫慌,下面就把解决方案放上来。首先先来讲下解决方案的思路,然后再把代码送上。

思路:

  微信的tabBar无法实现,那么就放弃微信的tabBar,改用Component 来实现。把微信自带的tabBar隐藏起来,用Component 做成伪tabBar并应该到页面上。

  1、把app.json下的 tabBar 给干掉。这样在首页就不会有tabBar显示了。

  2、写Component 伪tabBar并应该到页面上。

具体操作(代码)如下:

  app.json删除 tabBar

  写Component 伪tabBar

 

// Componet/tabBar/tabBar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        idx: {
            type: Number,
            value: 0
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        tabBar: [{
                "pagePath": "../../pages/index/index",
                "text": "首页",
                "switchQr": false,
                "iconPath": "/image/home.svg",
                "selectedIconPath": "/image/home_sel.svg",
            },
            {
                "pagePath": "",
                "text": "扫码买单",
                "switchQr": true,
                "iconPath": "/image/saoma.svg",
            },
            {
                "pagePath": "../../pages/user/user",
                "text": "我的",
                "switchQr": false,
                "iconPath": "/image/mine.svg",
                "selectedIconPath": "/image/mine_sel.svg",
            },
        ]
    },
    /**
     * 组件的方法列表
     */
    methods: {
        goToTab: function (e) {
            //如果点击当前页面则不进行跳转
            if (this.data.idx == e.currentTarget.dataset.index) {
                return false
            }
            wx.navigateTo({
                url: e.currentTarget.dataset.url
            })
        },
        // 扫码
        switchQr() {
            // console.log(\'扫码\')
            
        },
        
    }
})

 

 

 1 <!--Componet/tabBar/tabBar.wxml-->
 2 <view class="tabBar">
 3     <view class="cont">
 4         <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
 5             <view class="item {{item.switchQr?\'switchQr\':\'\'}}" catchtap="{{!item.switchQr?\'goToTab\':\'switchQr\'}}" data-url="{{item.pagePath}}" data-index="{{index}}">
 6                 <image class="ico" src="{{idx === index ? item.selectedIconPath : item.iconPath}}"></image>
 7                 <view class="txt {{idx === index ? \'selectedColor\' : \'\'}}">{{item.text}}
 8                 </view>
 9             </view>
10         </block>
11     </view>
12 </view>

 

 1 /* Componet/tabBar/tabBar.wxss */
 2 
 3 .tabBar {
 4     width: 100%;
 5     position: fixed;
 6     bottom: 0;
 7     font-size: 20rpx;
 8     color: #8A8A8A;
 9     background: #fff;
10     /* border-top: 2rpx solid #eee; */
11     box-shadow: 0rpx 1rpx 6rpx rgba(0,0,0,0.3);
12 }
13 
14 .cont {
15     margin-top: 10rpx;
16     padding: 0;
17     z-index: 0;
18     height: calc(100rpx + env(safe-area-inset-bottom) / 2);
19     padding-bottom: calc(env(safe-area-inset-bottom) / 2);
20     display: flex;
21 }
22 
23 .cont .item {
24     font-size: 24rpx;
25     position: relative;
26     flex: 1;
27     text-align: center;
28     padding: 0;
29     display: block;
30     height: auto;
31     line-height: 1;
32     margin: 0;
33     background-color: inherit;
34     overflow: initial;
35     justify-content: center;
36     align-items: center;
37 }
38 
39 .cont .item .ico {
40     width: 46rpx;
41     height: 46rpx;
42     margin: auto
43 }
44 
45 .cont .item .txt{
46     margin-top: 8rpx;
47     color: #333;
48 }
49 
50 .cont .switchQr .ico {
51     position: absolute;
52     width: 106rpx !important;
53     z-index: 2;
54     height: 106rpx !important;
55     border-radius: 50%;
56     font-size: 50rpx;
57     top: -50rpx;
58     left: 0;
59     right: 0;
60     margin: auto;
61     padding: 0;
62 
63 }
64 .cont .switchQr .txt{
65     margin-top: 56rpx;
66 }
67 
68 .cont .item .selectedColor{
69     color: #ff4e4e;
70 }

 

在index/user的页面上应用。

1、要在index.json/user.json文件引用Componet

1 "usingComponents": {
2     "tabBar":"/Componet/tabBar/tabBar"
3   },

2、在页面的引用Componet

1 <!-- index.wxml -->
2 <tabBar idx="0"></tabBar>
3 
4 <!--user.wxml -->
5 <tabBar idx="2"></tabBar>

 

以上是关于微信小程序 自定义tabbar的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 自定义tabbar

微信小程序 自定义tabbar

微信小程序自定义tabBar

WeChat-SmallProgram++:微信小程序自定义底部tabbar

微信小程序之如何自定义底部tabbar导航(转)

微信小程序之自定义tabbar