微信小程序配置tab栏

   "tabBar": {
      "color":"#333",    // 文字颜色
      "selectedColor": "#666",  // tab被选中后的颜色
      "backgroundColor":"#fff",  // tab背景颜色
      "position":"bottom",  // tab的位置
      "list": [
        {
          "pagePath": "pages/test/test",  //  跳转的页面
          "text": "首页",   // tab文字内容
          "iconPath":"./static/icon1.png",   //图标的路径,只支持本地
          "selectedIconPath":"./static/icon2.png"  // tab被选择后的图标,只支持本地
        },
        {
          "pagePath": "pages/haha/haha",
          "text": "日志",
          "iconPath": "./static/icon3.png",
          "selectedIconPath": "./static/icon4.png"
        }
      ]
    },

注意:tab的数量在2 - 5 个之间

小程序的文件不能大于2M

原文地址:https://www.cnblogs.com/luguankun/p/10914875.html

时间: 2024-11-08 08:19:42

微信小程序配置tab栏的相关文章

微信小程序配置_小程序页面配置

微信小程序配置_小程序页面配置 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": &q

微信小程序配置二

tabBar 客户端窗口底部的tab页面切换,只能配置最好两个.最多5个tab 属性说明: 属性 类型 必填 默认值 描述 color HexColor 是 tab上的文字默认颜色 selectedColor HexColor 是 tab上的文字选中时的颜色 backgroundColor HexColor 是 tab的背景颜色 boderStyle String 否 black tab上边框的颜色,仅支持black/white 大专栏  微信小程序配置二> list Array 是 tab的列

微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键、首页键,动态设置标题,响应式组件

微信小程序自定义导航栏 navigation bar 返回键 首页 github: https://github.com/chen-yt/wx_custom_navigation_bar https://github.com/Superman2113/wx_custom_navigation_bar 代码 navbar组件 navbar.wxml <view class="navbar" style="{{'height: ' + navigationBarHeight

解决微信小程序配置https不成功问题

拿到一个微信小程序的项目,需要配置https安全链接(为什么必须使用https不再赘述),预想这个已经很成熟的流程,应该不会有太大问题,结果还真是出乎意料,竟然掉进一个大坑,折腾好久. 申请证书配置的详细流程不再写了,大概就是去腾讯云或者阿里云申请一个ssl证书,按照自己的网站架构下载相应的证书,导入到自己的服务器,导入方法下载时有详细教程. 这里需要注意几点: 1. htpps默认使用443端口,请确认443未被占用 2.在防火墙中添加新的入站规则,允许443端口被访问.(我用的阿里云服务器E

微信小程序 自定义导航栏(1)

看着原博文https://www.cnblogs.com/sese/p/9761713.html简单的练习. 1.在app.json中     window配置navigationStyle 2.计算相关值 1. 整个导航栏的高度: 2. 胶囊按钮与顶部的距离: 3. 胶囊按钮与右侧的距离. 小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息  和 wx.getSystemInfo() 获取设备信息 App.js 代码如下: 通过这些信息

微信小程序:配置 pages window tabBar debug

app.json { "pages": [ "pages/page02/page02", "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#000000", "navigationBarT

微信小程序滚动Tab实现左右可滑动切换

--------------------------------------------------------wxml------------------------------------------------------- <view > <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}"> <view class=&

微信小程序 导航tab切换,跟随滚动置顶

<view class="small_nav {{tabFixed?'small_navFix':''}}" id="tab-con"> <scroll-view scroll-x="true" scroll-left="{{scrollLeft}}"> <view class="small_nav_scroll"> <view class="{{id==

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教