董龙衣

专注于写代码并享受当下生活。

微信小程序~底部 Tab + 顶上 TitleBar 的实现

这一节内容比较简单,实现的效果图如下

效果图

底部导航栏的实现

官方文档—框架—配置

查阅文档后,我们的实现方式如下:

"tabBar":{
    "borderStyle":"white",
    "position":"bottom",
    "list":[
      {
        "pagePath":"pages/reading/reading",
        "text":"干货",
        "iconPaht":"images/tab/yuedu.pg",
        "selectedIconPath":"images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/welfare/welfare",
        "text": "福利",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  }

Tip:
1. 当设置 position 为 top 时,将不会显示 icon
2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

顶部标题栏的实现

可以使用 API 实现,也可以使用配置文件实现
官方文档—框架—配置
官方文档—API—设置置顶信息

  • 通过 API 实现:
onLoad: function (options) {
    // other code
    wx.setNavigationBarTitle({
      title: '全部干货'
    })
    // other code
},


  • 通过配置文件实现

在当前页面的.json文件中添加如下代码
{
 "navigationBarTitleText":"全部干货"
}

Tip: 在除了app.json之外的其他.json配置文件只能配置window属性

阅读更多

扫码向博主提问

去开通我的Chat快问

itxiaodong

买的到的知识都是不值钱的
  • 擅长领域:
  • Android
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ITxiaodong/article/details/80303714
个人分类: 小程序
所属专栏: 小程序之旅
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭