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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ITxiaodong/article/details/80303714

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

效果图

底部导航栏的实现

官方文档—框架—配置

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

"tabBar":{
    "borderStyle":"white",
    "position":"bottom",
    "list":[
      {
        "pagePath":"pages/reading/reading",
        "text":"干货",
        "iconPath":"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
  1. 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属性

阅读更多

扫码向博主提问

龙衣倩

买的到的知识都是不值钱的
  • 擅长领域:
  • Android
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

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