精华内容
下载资源
问答
  • 微信小程序tabBar自定义详细教程代码片段

    千次阅读 多人点赞 2019-06-11 00:29:47
    代码片段链接需要到小程序开发工具导入:https://developers.weixin.qq.com/s/5ISii1mf799C 代码中含有大量注释,适合新手作为项目框架进行搭建,也可用作学习自定义tabBar搭建 效果展示 代码片段导入 链接:...

    介绍

    代码片段链接需要到小程序开发工具导入:https://developers.weixin.qq.com/s/5ISii1mf799C
    代码中含有大量注释,适合新手作为项目框架进行搭建,也可用作学习自定义tabBar搭建

    效果展示

    在这里插入图片描述

    代码片段导入

    链接:https://developers.weixin.qq.com/s/5ISii1mf799C
    在这里插入图片描述

    注意点1(请导入后参考)

    在这里插入图片描述
    在这里插入图片描述

    注意点2(请导入后参考)

    在这里插入图片描述

    总结:

    custom-tab-bar目录为固定的名称不能更改

    custom-tab-bar/index.xml为tabBar样式可进行更改

    custom-tab-bar/index.js为tabBar切换与+号页面弹出事件

    pages目录下为tabBar所有页面与其他页面还有资源文件

    本代码片段含有大量注释,配上本文图文介绍,足够了解自定义tabBar实现

    可作为项目基础框架,也可用作学习!如有不足,请谅解!欢迎留言反馈!

    展开全文
  • 微信小程序tabBar开启custom,自定义tabbar组件 小程序自带的tabBar样式,选中样式时:只能更改图标和文字的颜色。现在我需要选中时,当前选中的标签背景色变为红色,好像自带的并不能满足,因此琢磨了一下自定义...

    微信小程序tabBar开启custom,自定义tabbar组件

    小程序自带的tabBar样式,选中样式时:只能更改图标和文字的颜色。现在我需要选中时,当前选中的标签背景色变为红色,好像自带的并不能满足,因此琢磨了一下自定义组件。小程序自带的tabBar是在app.json里配置,可参考官网(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html)

    如下图是我要的tabBar效果:
    这是我要的效果

    实现过程

    1、在app.json文件中声明tabbar,并设置custom:true (开启自定义主键),另外我是直接在此全局声明usingComponents,引入自定义tabbar组件(customtabbar)。

    虽然已经自定义tabbar组件了,但是还要在app.json中还要配置完整的backgroundColor、selectedColor等。此时配置的backgroundColor等并不会渲染到自定义组件,但是还会要配置

    "tabBar": {
        "custom": true,
        "backgroundColor": "#ffffff",
        "color": "#999",
        "selectedColor": "#d43a3c",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "images/1-2.png",
            "selectedIconPath": "images/1-1.png",
            "text": "首页"
          },{
            "pagePath": "pages/approval/approval",
            "iconPath": "images/2-2.png",
            "selectedIconPath": "images/2-1.png",
            "text": "审批"
          },{
            "pagePath": "pages/search/search",
            "iconPath": "images/3-2.png",
            "selectedIconPath": "images/3-1.png",
            "text": "查询"
          },{
            "pagePath": "pages/manage/manage",
            "iconPath": "images/4-2.png",
            "selectedIconPath": "images/4-1.png",
            "text": "管理"
          },{
            "pagePath": "pages/user/user",
            "iconPath": "images/5-2.png",
            "selectedIconPath": "images/5-1.png",
            "text": "我的"
          }]
      },
      "usingComponents": {
        "customtabbar": "custom-tab-bar/index"
      }
    
    2、写自定义组件,注意:要在pages同级目录下新建组件文件夹文件夹名字:custom-tab-bar,自定义组件文件名为index,如下图。

    在网上看到一篇文章,是说自定义组件的文件夹必须在pages同级,因为index.js中配置的tabbar的list项的路径必须是pages下的一级目录,此外文章有说到组件里的命名必须用index。至于原因我也不清楚。大家可以试一下,我前面写的组件出不来,后面采用这种方式就出来了,我不确定是不是这个原因还是别的原因导致的。
    在这里插入图片描述

    3、自定义组件index.wxml

    currentTab 为当前tabbar选中下标
    data-url="{{item.pagePath}}" 将tabbar对应的页面路径

    <view class="nav-tabs">
      <view class="tab-list {{currentTab == idx ? 'active' : 'default' }}" wx:for="{{items}}" wx:key="prototype" wx:for-index="idx" wx:for-item="item" data-current="{{idx}}" data-url="{{item.pagePath}}" bindtap="swichNav">
        <text class="tab-text" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}">{{item.text}}</text>
        <image class="iconPath" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}"></image>
      </view>
    </view>
    
    4、自定义组件index.js

    配置的路径要是同级下的第一级目录,,百度到的资料是说只能第一级,第二级会出错,我没有试。

     data: {
        currentTab: 0,    // 默认首页为选中页面
        "backgroundColor": "#ffffff",
        "selectedColor": "#d43a3c",
        items: [
          {
            "pagePath": "/pages/index/index", 
            "iconPath": "/images/1-1.png",
            "selectedIconPath": "/images/1-2.png",
            "text": "首页"
          },
          {
            "pagePath": "/pages/approval/approval",
            "iconPath": "/images/2-1.png",
            "selectedIconPath": "/images/2-2.png",
            "text": "审批"
          },
          {
            "pagePath": "/pages/search/search",
            "iconPath": "/images/3-1.png",
            "selectedIconPath": "/images/3-2.png",
            "text": "查询"
          },
          {
            "pagePath": "/pages/manage/manage",
            "iconPath": "/images/4-1.png",
            "selectedIconPath": "/images/4-2.png",
            "text": "管理"
          },
          {
            "pagePath": "/pages/user/user",
            "iconPath": "/images/5-1.png",
            "selectedIconPath": "/images/5-2.png",
            "text": "我的"
          }
        ]
      },
    
      swichNav: function (e) {
        let that = this;
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          that.setData({    
            currentTab: e.target.dataset.current
          })
          let url = e.currentTarget.dataset.url;  // 点击tabbar时,跳转对应的页面
          wx.switchTab({
            url: url,
          })
        }
      },
    
    5、我的index.wxss
    page {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .nav-tabs {
      width: 100%;
      display: flex;
      position: fixed;
      bottom: 0;
    }
    
    .tab-list {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column-reverse;
      background: #fcfcfc;
      height: 120rpx;
    
    }
    
    .tab-text {
      font-size: 24rpx;
      line-height: 35rpx;
      color: #5f5f5f;
    }
    
    .iconPath {
      width:54rpx;
      height: 54rpx;
    }
    
    .tab-content {
      flex: 1;
    }
    
    .default {
      line-height: 75rpx;
      text-align: center;
      flex: 1;
      color: #eee;
      font-weight: bold;
      font-size: 28rpx;
    }
    
    .active {
      line-height: 75rpx;
      text-align: center;
      background-color: #d43a3c;
      flex: 1;
      font-weight: bold;
      font-size: 28rpx;
    }
    .active .tab-text {
      color: #fff;
    }
    
    .show {
      display: block;
      flex: 1;
    }
    
    .hidden {
      display: none;
      flex: 1;
    }
    
    6、点击tabbar跳转页面时,会重新加载tabbar组件,导致选中样式一直是默认的,因此需要在有用到tabbar的页面的js文件中做如下操作:(以我的 “查询” 页面为例)

    对于this.getTabBar()官网有介绍(https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html)

    /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
          this.getTabBar().setData({
            currentTab: 2  //数字是当前页面在tabbar的索引,如我的查询页索引是2,因此这边为2,同理首页就为0,审批页面为1
          })
        }
      },
    
    7、此时组件自定义完毕,但是页面会出现两个tabbar,一个自定义,一个自带的,此时在app.js中的onLaunch函数中加入 wx.hideTabBar() , 隐藏自带的tabbar。即可实现开头的效果。

    在这里插入图片描述

    文章声明:此文章有部分借鉴网络上的例子,加以修改成我的需求,如若觉得相似,可联系我删稿,谢谢。

    展开全文
  • 主要介绍了如何自定义微信小程序tabbar上边框的颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序自定义 tabBar微信小程序自定义 tabBar先简单介绍一下微信官方提供的自定义tabBar 的用法实际使用中出现问题?自助自定义tabBar组件实现custom-tab-bar 代码页一起奉上 微信小程序自定义 tabBar 基础库 ...

    微信小程序自定义 tabBar

    基础库 2.5.0 开始支持,低版本需做兼容处理。
    微信小程序基础库 2.5.0 开始微信官方开放自定义底部 tabBar 组件 。主要是为了让开发者可以更加灵活地设置 tabBar 样式,以满足更多个性化的场景。但是在实际开发者使用微信官方提供的组件 , 适配和兼容并不感人 , 让人从满怀希望到绝望 ;

    先简单介绍一下微信官方提供的自定义tabBar 的用法

    在 app.json 中的 tabBar 项指定 custom (布尔值)字段,在所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。在根目录下创建custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss具体页面代码不在书写 , 可在 tabBar 组件底部示例代码中点击 在开发者工具中预览效果 在编辑器中拷贝相关代码即可;

    实际使用中出现问题?
    在使用官方提供的自定义tabBar 组件中 , 点击切换tabBar时 , 点击切换选中的状态一直是上一次(上一个tabBar)点击的tabBar , 并且首次点击切换到其他tabBar页是会有闪烁现象 ; 在微信社区和博客中尝试很多方法 , 都没有能解决问题 , 最后不得放弃使用 , 自己从新自定义一个tabBar组件 ;

    自助自定义tabBar组件实现

    1.在app.js中 onLaunch 中 调用 wx.hideTabBar() 方法隐藏tab , 或者在第2步新建的 custom-tab-bar目录中index.js生命周期attached中调用 wx.hideTabBar() 方法隐藏tab; 注意基础库 1.9.0开始支持 , 全局变量globalData 中增加 selectedIndex:0 ;
    2. 新建components目录 , 在components目录中创建 custom-tab-bar目录 custom-tab-bar目录中分别新建index.wxml , index.js ,index.json , index.wxss页面 ; 注意要在index.json 设置 component": true;
    3. 在tabBar页面中引用组件 .json页中设置 "usingComponents": { "custom-tab-bar": "/components/custom-tab-bar/index" }
    4. .wxml页面中使用 tabBar组件<custom-tab-bar></custom-tab-bar>

    custom-tab-bar 代码页一起奉上

    index.wxml页面

    <cover-view class="tab-bar" style="background:{{items.style.background}}">
      <cover-view class="tab-bar-border"></cover-view>
      <cover-view wx:for="{{items.data}}" wx:key="*this" class="tab-bar-item" data-path="{{item.linkUrl}}" data-index="{{index}}" bindtap="switchTab" wx:for-index="index">
        <cover-image src="{{selected === index ? item.select_imgUrl : item.default_imgUrl}}"></cover-image>
        <cover-view style="color: {{selected === index ? item.select_color : item.color}}">{{item.text}}</cover-view>
      </cover-view>
    </cover-view>
    

    index.wxss页面

    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: white;
      display: flex;
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .tab-bar-border {
      background-color: rgba(0, 0, 0, 0.33);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
    
    .tab-bar-item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .tab-bar-item cover-image {
      width: 27px;
      height: 27px;
    }
    
    .tab-bar-item cover-view {
      font-size: 10px;
    }
    
    

    index.js页面

    const App = getApp();
    Component({
      lifetimes: {
        attached: function () {
          wx.hideTabBar();
          this.getTab();
        },
        ready: function () {
          this.setData({
            selected: App.globalData.selectedIndex
          });
        }
      },
      
      data: {
        selected: 0, // 当前 tabBar 索引 
        color: "#6e6d6b",
        selectedColor: "#fd4a5f",
        borderStyle: "black",
        backgroundColor: "#ffffff",
        items: [], //.wxml items 渲染数据
        //tabBar items(如下list字段)示例
        list: {
        	data:[{
    			color: "#666666"
    			default_imgUrl: "https://www.jinnong.com/uploads/202102021028438faa49673.png"
    			linkUrl: "pages/index/index"
    			select_color: "#f44336"
    			select_imgUrl: "https://www.jinnong.com/uploads/2021020210284341feb1488.png"
    			text: "首页"
    		},{
    			color: "#666666"
    			default_imgUrl: "https://www.jinnong.com/uploads/20210202102843feecc5864.png"
    			linkUrl: "pages/customtabbar/index?page_id=10125"
    			select_color: "#f44336"
    			select_imgUrl: "https://www.jinnong.com/uploads/202102021028438b66c5733.png"
    		},{
    			color: "#666666"
    			default_imgUrl: "https://www.jinnong.com/uploads/20210202102843468f98837.png"
    			linkUrl: "pages/flow/index"
    			select_color: "#f44336"
    			select_imgUrl: "https://www.jinnong.com/uploads/20210202102843559327043.png"
    			text: "购物车"
    		},{
    			color: "#666666"
    			default_imgUrl: "https://www.jinnong.com/uploads/202102021028438faa49673.png"
    			linkUrl: "pages/user/index"
    			select_color: "#f44336"
    			select_imgUrl: "https://www.jinnong.com/uploads/2021020210284341feb1488.png"
    			text: "我的"
    		}],
    		name: "导航组",
    		type: "navBar",
    		style: {
    			background: "#ffffff"
    			rowsNum: "4"
    		}
        }
      },
      methods: {
      	/**
         * tabBar切换
         */
        switchTab(e) {
          const data = e.currentTarget.dataset;
          const url = data.path;
          App.navigationTo(url);
          App.globalData.selectedIndex = data.index;
        },
        /**
         * 后台接口获取tabBar数据
         */
        getTab(){
          let _this = this;
          App._get('page/nav', {}, function(res) {
            const items = res.data.items;
            _this.setData({items})
          });
        }
      }
    })
    

    index.json页面

    {
      "component": true
    }
    

    注:实际项目中使用点击切换tabBar时会项存item下标指向问题,需要结合自己的项目数据结构做js逻辑处理显示(后续完整解决方法会文章形式补充~~)

    好用 , 方便点下收藏 , 不迷路 ! ! !

    展开全文
  • 微信小程序实现自定义tabBar(类似咸鱼)tabbar-master.zip
  • 背景:在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案:方式一:通过tabBar组件自带的 borderStyle 属性来控制边框的颜色,将边框的颜色...

    背景:

    在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求

    bd5c48ab11a475f1ccbb793212ac83c9.png

    解决方案:

    方式一:

    通过tabBar组件自带的 borderStyle 属性来控制边框的颜色,将边框的颜色设置为白色,如下代码:

    "borderStyle": "white",

    全部代码:

    app.json文件

       "tabBar": {    "color": "#7B7E82",    "selectedColor": "#333333",    "borderStyle": "white",    "list": [{      "pagePath": "pages/index/index",      "text": "首页",      "iconPath": "images/home_default.png",      "selectedIconPath": "images/home_select.png"    },{      "pagePath": "pages/index/index",      "text": "服务预约",      "iconPath": "images/service_default.png",      "selectedIconPath": "images/service_select.png"    },{      "pagePath": "pages/cemetery/cemetery",      "text": "公墓服务",      "iconPath": "images/cemetery_default.png",      "selectedIconPath": "images/cemetery_select.png"    },{      "pagePath": "pages/me/me",      "text": "我的",      "iconPath": "images/me_default.png",      "selectedIconPath": "images/me_select.png"    }]  } 

    但是,通过这种方式,只能设置 white和 black ,如若不是,会爆以下错误:

    dcbec23b05d9ca52d5f0507101f02ea1.png

    方式二:

    1、首先将 tabBar组件自带的 borderStyle 的颜色设置为 white (因为默认背景色为白色,将边框设置为白色,就相当于隐藏边框)

    2、给app.wxss添加如下样式,已达到自定义 tabBar 颜色的目的(其实就是在页面的底部自定义一条线)

     /**修改tabbar线条:**/page::after{  content: "";  position: fixed;  left: 0;  bottom: 0;  width: 100%;  height: 2rpx;  background-color: #EEEEEE;  z-index: 9999;} 

    效果图:

    14f79a425ca356a1bac443bb55d72c0f.png

    注意:

    如若其它页面不需要底部的边框线,那么只需要给当前页面的.wxss文件添加一个覆盖page样式的代码,具体如下:

    page::before{    height: 0rpx;}
    展开全文
  • 在app.json里面配置 pages、usingComponents 和 tabBar “pages”: [ “pages/page1/index”, “pages/page2/index”, “pages/page3/index”, “pages/page4/index”, “pages/page5/index” ], “usingComponents...
  • 主要介绍了微信小程序tabBar设置实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序使用自定义Tabbar (1)在原本的全局配置app.json的底部导航上面部分添加"custom": true, "tabBar": { "custom": true, // 需要添加的部分 "color": "#cccccc", "selectedColor": "#000000", ...
  • 微信小程序tabbar设置样式在哪里改

    千次阅读 2018-05-07 16:17:00
    微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航。tabbar是在项目根目录中的配置文件 app.json 中进行设置;如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以...
  • 微信小程序——自定义tabbar样式

    千次阅读 2020-09-03 19:35:13
    QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技aming 网络安全 ,深度学习,嵌入式,机器强化,生物...
  • 微信小程序默认的tabBar只能提供给开发者修改下颜色,然后就没了。 有的人想要最求个性化的tabBar,比如想要在tab中间加一个巨大的扫码按钮,这是很常见的。那么这时候,自定义tabBar就派上用场了。 做过小程序的...
  • 自定义微信小程序tabBar

    千次阅读 2019-06-12 14:09:15
    1.tabBar在实际的项目中,被UI要求字体大小为20rpx,而微信自带的是24rpx 2.tabBar加上了权限管理(只有会员才可以看到专属的tabBar入口) 3.tabBar点击后,如果是同样的tabBar禁止重新加载数据 4.tabBar对应的页面要...
  • 微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求 解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属性来控制边框的颜色,将边框的...
  • 微信小程序使用自定义tabBar组件的要点说明 之前一直很好奇小程序的路由和tab页面切换的功能如何实现,在研究了微信原生的tabBar组件后明白了如何实现tab标签切换。 1. 配置app.json 在app.json中配置"tabBar" ...
  • 自定义微信小程序tabBar,切换效果不会闪烁,逻辑上简单易懂,适合新手。 微信小程序官方有提供了一个tabBar,实现底部导航栏的功能,虽然简单易用,但无奈限制条件有点多,不适合很多情况。 本来打算参考网友的写法...
  • 微信小程序自定义底部TabBar 想要呈现的效果图: 将TabBar封装成一个组件: 下面是tabbar.wxml的代码: <view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar....
  • 自定义 tabBar:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 在app.json 中,添加一个tabBar属性,如下 然后把自己搜集的一些icon放在根目录下 接下来就开始...
  • 微信小程序底部自定义tabBar

    千次阅读 2020-01-21 11:02:57
    在 app.json 内配置(限制:菜单栏最多5个,样式、图片不好个性化设置) "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list"...
  • 微信小程序 自定义tabbar

    千次阅读 2018-08-08 17:12:39
    ## 微信小程序 自定义tabbar [项目地址,欢迎 star](https://github.com/songzeng2016/wechat-app-tabbar)  [https://github.com/songzeng2016/wechat-app-tabbar]...
  • 微信小程序自定义tabBar写法一:使用官方组件实现 写法一:使用官方组件实现 第一步:设置app.json的tabBar项为custom:true,并开启usingComponents:{} 第二步:导入官方已经封装好的custom-tabbar组件 组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,873
精华内容 1,149
关键字:

微信小程序tabbar自定义样式

微信小程序 订阅