欢迎光临,了解微信小程序开发,就上易用通!

面向新手《十七》tabbar相关知识及不出现的可能原因

发布:2018-02-01 17:44浏览: 来源:网络 作者:cola

一:Tabbar简介:
 

2.扫描二维码登录,在手机点击确认登录

面向新手《十七》tabbar相关知识及不出现的可能原因(图1)

3.新建一个项目,这里选择无APPID,如果需要填写APPID,需要到微信小程序里面注册,然后就可以获取APPID,填写项目名称,选择项目目录(注释:微信小程序不会自己创建主目录文件,所以自己先建立一个项目文件夹,然后选择存放到这个文件夹中),添加项目,就生成了一个项目工程,这是注意有一个单选单按钮,如果取消这个单选按钮,就会创建一个空的工程,我选择选中这个按钮;

面向新手《十七》tabbar相关知识及不出现的可能原因(图2)

4.然后得到一个新的工程,现在在下方要放一个tabbar,先新建一个image目录,点击目录右键->新建->目录

面向新手《十七》tabbar相关知识及不出现的可能原因(图3)

面向新手《十七》tabbar相关知识及不出现的可能原因(图4)

 

5.点击image文件夹->硬盘打开,将图片拉入次目录中,注意:图片大小限制为40kb,尺寸81px * 81px;

面向新手《十七》tabbar相关知识及不出现的可能原因(图5)

6。先看一下目录结构,程序有两个目录,一个pages和utils,其中pages里面又包含index和logs,这个两个目录是两个页面(第一个页面就是运行程序看到的,第二页面是点击我们的头像出来的),我们就要这两个页面作为tabbar两个页面;

点击点击app.json写tabbar控件;为了方便我把image放到了根目录下,选择image目录点击右键->硬盘打开->将Image目录copy到根目录下,删除原目录就可以了,代码如下:

面向新手《十七》tabbar相关知识及不出现的可能原因(图6)

 

方法说明:

color:未选择字体颜色

selectedColor:选择字体颜色

borderStyle:tabbar上方线的颜色white(仅支持白色和黑色)

backgroundColor:tabbar背景颜色
networkTimeout:设置网络超时时间
debug:设置debug模式开启

效果如图:

面向新手《十七》tabbar相关知识及不出现的可能原因(图7)

注意:list的页面不许在app.json的pages里面注册过;

面向新手《十七》tabbar相关知识及不出现的可能原因(图8)

 

二:TabBar不出现的一种原因

 

学习微信小程序中,遇到底部的TabBar不出现的问题。经过多番尝试,终于解决问题。在此记录问题产生的原因和对策。下面先描述错误现象,接着指出错误原因,最后提供正确的实例。 
  错误现象是,项目的app.json使用以下代码,却没有如期望那样在屏幕底部出现TabBar。

{
  "pages":[
    "pages/clickDemo/clickDemo",
    "pages/logs/logs",
    "pages/index/index",
    "pages/mypage/mypage"
  ],
  "window": {
    "backgroundTextStyle": "dark ",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "Tabbar Demo",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#ff0000"
  },
  "tabBar": {
    "color": "#000000",
    "borderStyle": "#000",
    "selectedColor": "#9999FF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/location_normal.png",
        "selectedIconPath": "image/location_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "设置",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }
    ]
  }
}

底部没有出现TabBar,如图1所示。 

面向新手《十七》tabbar相关知识及不出现的可能原因(图9)

图1 左侧的屏幕效果图中,底部没有TabBar

  为什么底部不出现TabBar?原因在于,app.json头部的pages数组的第一项"pages/clickDemo/clickDemo"没有成为tabBar的一员,也就是在tabBar的list数组内没有链接clickDemo页面的条目。    具体对策有两种。一,我们在list数组内加入链接clickDemo页面的条目,如图2所示。图2中的红色矩形框内的代码是新加的,下面给出了这段代码。二,把pages数组的第一项设置为"pages/index/index",或者设置为"pages/logs/logs"。也就是说,pages数组的第一项必须是tabBar的list数组的一员。     

面向新手《十七》tabbar相关知识及不出现的可能原因(图10)

图2 解决底部不出现TabBar的对策

  对策一在app.json内添加的代码如下。注意,tabBar的list数组的条目之间要用逗号分隔。

      {
        "pagePath": "pages/clickDemo/clickDemo",
        "text": "事件Demo",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }

  题外话,微信小程序的开发工具需要大大大提升,包括它的使用手册。本文提及的问题是一个隐晦的约定。开发人员违反约定的话,开发工具应该快速指出来,甚至给出改进措施。否则,会浪费开发人员大量时间,破坏他/她们的情绪,最后可能形成“开发微信小程序真费劲”的结论。祝愿微信小程序开发工具越来越好用。

三: 只针对tabBar上的页面一个BUG

 

在安卓机上,第二次加载的tabBar页面(即非第一次加载程序的首个tabBar)在获取屏幕高度时会偏小大概tabBar高度。 可以这么测试 开启调试模式 在首次点击tabBar页面时会发现console那个图标会从上往下动 解决办法: 就是不要在页面加载的时候过去屏幕高度,即不要直接在onLoad,onShow和onReady上获取屏幕高度 或者要在这些地方获取的话使用setTimeout,延时大概1s,1s的作用是让这个页面已经加载完毕才获取






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。