精华内容
下载资源
问答
  • 小程序 tabBar

    2019-04-08 16:54:48
    在app.json的pages里直接添加路径,会自动生成文件,然后添加tabBar,准备好底部切换的图片,window中可进行顶部的设置 { "pages":[ "pages/index/index", "pages/logs/logs", "pages/one/one", "pages/two/two...

    首先准备两个页面
    在app.json的pages里直接添加路径,会自动生成文件,然后添加tabBar,准备好底部切换的图片,window中可进行顶部的设置

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs",
        "pages/one/one",
        "pages/two/two"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#eee",
        "navigationBarTitleText": "测试小程序",
        "navigationBarTextStyle":"black"
      },
      "tabBar": {
        "selectedColor": "#1296db",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "pages/source/one-un.png",
            "selectedIconPath": "pages/source/one.png"
          },
          {
            "pagePath": "pages/one/one",
            "text": "设置",
            "iconPath": "pages/source/set-un.png",
            "selectedIconPath": "pages/source/set.png"
          }
        ]
      }
    }
    
    
    

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

    展开全文
  • 小程序tabBar

    千次阅读 2018-02-01 13:59:21
    tabBar 指底部的 导航配置属性 color 未选择时 底部导航文字的颜色 selectedColor 选择时 底部导航文字的颜色 borderStyle 底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现...

    tabBar  指底部的 导航配置属性

    color  未选择时 底部导航文字的颜色

    selectedColor  选择时 底部导航文字的颜色

    borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

    list   导航配置数组

    selectedIconPath 选中时 图标路径

    iconPath 未选择时 图标路径

    pagePath 页面访问地址

    text  导航图标下方文字;

    "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "black",
    "list": [
    {
    "selectedIconPath": "images/icon_consult_press.png",
    "iconPath": "images/icon_consult.png",
    "pagePath": "pages/index/index",
    "text": "首页"

    },
    {
    "selectedIconPath": "images/icon_invest_press.png",
    "iconPath": "images/icon_invest.png",
    "pagePath": "pages/logs/logs",
    "text": "一元投"

    },
    {
    "selectedIconPath": "images/icon_mine_press.png",
    "iconPath": "images/icon_mine.png",
    "pagePath": "pages/mine/mine",
    "text": "我的"

    }

    ]

    }
    注意:每个页面的json文件都不能去掉navigationBarTitleText这个属性。否则会报错

    展开全文
  • mpvue 自定义小程序tabBar
  • 微信小程序tabBar

    2017-08-29 16:10:57
    小程序 tabBar

    在根目录的app.json中添加tabBar,示例如下

    {
      "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "pages/scanning/scanning"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "tabBar": {
        "color": "#a9b7b7",
        "selectedColor": "#11cd6e",
        "borderStyle": "white",
        "list": [
          {
            "selectedIconPath": "images/11.png",
            "iconPath": "images/11.png",
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "selectedIconPath": "images/11.png",
            "iconPath": "images/11.png",
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }
        ]
      }
    }

    注:在小程序中,最后一个括号后面不能带’,’,否则会出现编译错误

    展开全文
  • 主要介绍了微信小程序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底部导航中文注解api,信小程序tabBar就是app底部的那个导航栏,可以放1-5导航链接,这里对微信小程序底部导航tabbar的中文解释。 微信小程序tabBar是在全局app.json文件里面配置的。  小程序...
  • 主要介绍了微信小程序tabBar用法,结合实例形式详细分析了微信小程序中tabBar的功能、配置项使用方法与操作注意事项,并附带完整demo源码供读者下载参考,需要的朋友可以参考下
  • 主要介绍了微信小程序tabBar设置实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了微信小程序tabbar不显示解决办法的相关资料,需要的朋友可以参考下
  • 小程序tabBar之间的传参
  • 微信小程序 tabbar

    2018-07-03 11:33:00
    微信小程序 tabbar 只有在最外面的json 文件中定义一个,而且,pages中的第一个页面路径,一定是在tabbar的一个目录中, 而且,一个小程序只能一个页面tabbar!其他需要累死tabbar的切换页面,要自己写,好气哦 ...
  • 小程序tabBar显示问题

    2019-09-26 12:33:09
    查了一下才知道,小程序tabBar只在tabBar中的list定义了页面的才会显示,其余页面不会显示 如下例:tabBar只在画红框的页面显示 转载于:https://www.cnblogs.com/jcydd/p/10789894.html...
  • 主要介绍了如何自定义微信小程序tabbar上边框的颜色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序tabBar设置

    2018-12-06 13:19:44
    微信小程序tabBar设置 https://blog.csdn.net/sinat_33881413/article/details/78069402 微信小程序API文档 tabBar设置 https://developers.weixin.qq.com/miniprogram/dev/api/wx.setNavigationBarColor.html ...
  • 小程序tabbar 自定义

    2019-03-01 09:04:26
    微信小程序下方的突出Tabbar。客户要求下边的导航必须有凸出的效果,后来调用这个实现。里面有详细的使用步骤。
  • 微信小程序 tabBar模板

    2018-04-14 15:15:00
    小程序tabBar,我们可以通过app.json进行配置,可以放置于顶部或者底部,用于不同功能页面的切换,挺好的。。。 但,,,貌似不能让动态修改tabBar(需求:通过switch开关改变小程序皮肤(包括改变标题栏背景色、...
  • 微信小程序tabBar使用

    2018-05-24 16:09:00
    底部导航的应用十分广泛,微信小程序也不例外,这次主要记录一下微信小程序tabBar使用方法。 tabBar使用十分简单,只需要在配置文件app.json中配置即可,如下图: 参数属性解析: list 每个 item属性: ...
  • 微信小程序tabBar底部导航中文注解api,信小程序tabBar就是app底部的那个导航栏,可以放1-5导航链接,这里对微信小程序底部导航tabbar的中文解释。 微信小程序tabBar是在全局app.json文件里 微信小程序tabBar底部...
  • 微信小程序TabBar的使用 一、TabBar使用步骤 ​ 1.创建所需要的界面和所需要的图片: 配置文件: 我们找到项目根目录中的配置文件 app.json 加入如下配置信息 "tabBar": { "color": "#a9b7b7", "selectedColor...
  • 主要介绍了微信小程序tabBar模板用法,结合具体实例形式分析了tabBar模板的定义、配置、引用等相关操作技巧,需要的朋友可以参考下
  • 主要为大家详细介绍了支付宝小程序重写tabbar底部导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了微信小程序重写tabbar底部导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 这里先贴一下小程序Tabbar官网地址 属性 这里在贴一下属性 属性这里需要注意一下,list属性是我们在创建tabbar的时候,list集合里面元素的属性。 text 是元素的标题 iconPath 是元素上面的图标 selectedIconPath ...

空空如也

空空如也

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

小程序tabbar