美文网首页微信小程序
微信小程序 自定义底部导航

微信小程序 自定义底部导航

作者: AAA_si | 来源:发表于2022-04-01 11:42 被阅读0次

    先看效果


    footer.png

    很多时候微信小程序自带的tabBar已不满足需求,转而使用微信小程序的自定义tarbar,进行动态展示,但遇到了首次点击每个item会有闪烁的情况,每个点击完之后,才会恢复正常。

    本文自定义tarbar没有解决闪烁的情况。

    如需要看下一篇文章--微信小程序 自定义底部导航闪烁解决正在加急完成预计明天

    app.json
    {
      "pages": [
        "pages/footer/footer",
        "pages/header/header",
        "pages/my/my"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "wx",
        "navigationBarTextStyle": "black"
      },
      "tabBar": {
        "backgroundColor": "#ffffff",
        "color": "#CCCCCC",
        "selectedColor": "#000",
        "list": [
          {
            "pagePath": "pages/footer/footer",
            "text": "首页",
            "iconPath": "components/tabbar/icon/tab1.png",
            "selectedIconPath": "components/tabbar/icon/tab1-active.png"
          },
          {
            "pagePath": "pages/header/header",
            "iconPath": "components/tabbar/icon/icon_release.png",
            "isSpecial": true,
            "text": ""
          },
          {
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath": "components/tabbar/icon/tab4.png",
            "selectedIconPath": "components/tabbar/icon/tab4-active.png"
          }
        ]
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }
    

    ⚠️ "tabBar"重点,自定义tabbar也需要写,但是在app.js中隐藏默认的tabbar

    app.js
    //app.js
    App({
      onLaunch: function () {
        // 隐藏系统tabbar
        wx.hideTabBar();
        // 获取设备信息
        this.getSystemInfo();
      },
      getSystemInfo: function () {
        let t = this;
        wx.getSystemInfo({
          success: function (res) {
            t.globalData.systemInfo = res;
          }
        });
      },
      editTabbar: function () {
        let tabbar = this.globalData.tabBar;
        let currentPages = getCurrentPages();
        let _this = currentPages[currentPages.length - 1];
        let pagePath = _this.route;
        (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
        for (let i in tabbar.list) {
          tabbar.list[i].selected = false;
          (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
        }
        _this.setData({
          tabbar: tabbar
        });
      },
      globalData: {
        userInfo: null,
        tabBar:{
          "backgroundColor": "#ffffff",
          "color": "#CCCCCC",
          "selectedColor": "#000",
          "list": [
            {
              "pagePath": "/pages/footer/footer",
              "iconPath": "icon/tab1.png",
              "selectedIconPath": "icon/tab1-active.png",
              "text": "首页"
            },
            {
              "pagePath": "/pages/header/header",
              "iconPath": "icon/icon_release.png",
              "isSpecial": true,
              "text": ""
            },
            {
              "pagePath": "/pages/my/my",
              "iconPath": "icon/tab4.png",
              "selectedIconPath": "icon/tab4-active.png",
              "text": "我的"
            },
          ]
        }
      }
    })
    
    

    ⚠️ this.getSystemInfo() === 获取设备信息,因为iosX系统适配

    下面tabbar组件和引入并使用

    目录结构
    -- components    // 公共组件
      -- tabbar   // 自定义导航组件
        -- icon    //  图片
        -- tabbar.js
        -- tabbar.json
        -- tabbar.wxml
        -- tabbar.wxss
    -- pages    // 页面
      -- footer   // 需要引入自定义导航的页面
        -- footer.js
        -- footer.json
        -- footer.wxml
        -- footer.wxss
      -- header   // 需要引入自定义导航的页面
        -- header.js
        -- header.json
        -- header.wxml
        -- header.wxss
      -- my   // 需要引入自定义导航的页面
        -- my.js
        -- my.json
        -- my.wxml
        -- my.wxss
    
    自定义导航组件

    tabbar.wxml

    <view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
      <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
        // 二维码
        <navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="switchTab">
          <view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
          <image class='special-text-wrapper'></image>
          <text>{{item.text}}</text>
        </navigator>
        // 其它
        <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
          <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
          <text>{{item.text}}</text>
        </navigator>
      </block>
    </view>
    

    tabbar.wxss

    .tabbar_box{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 100rpx;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    }
    .tabbar_box.iphoneX-height{
      padding-bottom: 66rpx;
    }
    .middle-wrapper{
    position: absolute;
    right: 310rpx;
    bottom: 0;
    background-color: rgb(121, 27, 27);
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border-top: 2rpx solid #f2f2f3;
    }
    .middle-wrapper.iphoneX-height{
    bottom: 66rpx;
    }
    .tabbar_nav{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 20rpx;
      height: 100%;
      padding:5px 0px 5px 0px;
      position: relative;
    }
    .tabbar_icon{
      width: 56rpx;
      height: 56rpx;
      padding-bottom: 0rpx;
    }
    .special-wrapper{
    position: absolute;
    /* left: 77rpx; */
    top: -36rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border-top: 2rpx solid #f2f2f3;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 6rpx;
    }
    .special-wrapper .tabbar_icon{
      width: 120rpx;
      height: 120rpx;
    }
    .special-text-wrapper{
    width: 56rpx;
    height: 56rpx;
    }
    
    text{
    padding-bottom: 20rpx;
    }
    

    c.js

    const app = getApp();
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        tabbar: {
          type: Object,
          value: {
            "backgroundColor": "#ffffff",
            "color": "#979795",
            "selectedColor": "#1c1c1b",
            "list": [
              {
                "pagePath": "/pages/footer/footer",
                "iconPath": "icon/tab1.png",
                "selectedIconPath": "icon/tab1-active.png",
                "text": "首页"
              },
              {
                "pagePath": "/pages/header/header",
                "iconPath": "icon/icon_release.png",
                "isSpecial": true,
                "text": ""
              },
              {
                "pagePath": "/pages/my/my",
                "iconPath": "icon/tab4.png",
                "selectedIconPath": "icon/tab4-active.png",
                "text": "我的"
              },
            ]
          }
        }
      },
      data: {
        isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false
      },
      methods: {
    
      }
    })
    
    

    tabbar.json

    {
      "component": true,
      "usingComponents": {}
    }
    

    自定义导航基本可以,下面在页面中引入并使用
    footer.wxml, header.wxml, my.wxml

    <view>
      footer footer
    </view>
    <foot></foot>
    

    footer.json, header.json, my.json

    {
      "usingComponents": {
        "foot":"../../components/tabbar/tabbar"
      },
      "navigationBarTitleText": "自定义底部"
    }
    

    footer.js, header.js, my.js

    //获取应用实例
    const app = getApp()
    Page({
      data: {
    
      },
      onLoad: function (options) {
        app.editTabbar();
      },
    })
    
    OK,完事。大家有任何问题都可以提出来,欢迎评论!

    相关文章

      网友评论

        本文标题:微信小程序 自定义底部导航

        本文链接:https://www.haomeiwen.com/subject/ylhwjrtx.html