持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

tabbar组件:

限制:

tabBar里边能够配置最少两个最少五个 页面.

分类:

分为两种,顶部和底部.

位置:

放于根目录下的app.json页面.

格式:

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "home",
      "iconPath": "/images/tabBar/home.png",
      "selectedIconPath": "/images/tabBar/home-active.png"
     
    },
    {
      "pagePath": "pages/calculator/calculator",
      "text": "culculator",
      "iconPath": "/images/tabBar/calculator.png",
      "selectedIconPath": "/images/tabBar/calculator-avtive.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabBar/contact.png",
      "selectedIconPath": "/images/tabBar/contact-active.png"
    }
  ]
  },

其中list列表中存放单位元素为tabbar所含的页面,有几个元素tabbar就有几个页面.

属性:

tabbar的组成部分:

其中每个页面 下边都含有几个常用属性如下图所示:

其中pagepath组件和text组件为必填项,这两个组件必须存在.而下方的iconpath组件和selectediconpath组件为非必填项,可以选填.如果不填,图标位置将会预留为背景色.

注意:

 当渲染顶部tabbar时不会显示图标,只会显示文字.

list列表的第一个页面要是pages下的第一个页面.

其中tabbar的图标素材可以去 iconfont-阿里巴巴矢量图标库 去获取.

样例:

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "home",
      "iconPath": "/images/tabBar/home.png",
      "selectedIconPath": "/images/tabBar/home-active.png"
     
    },
    {
      "pagePath": "pages/calculator/calculator",
      "text": "culculator",
      "iconPath": "/images/tabBar/calculator.png",
      "selectedIconPath": "/images/tabBar/calculator-avtive.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabBar/contact.png",
      "selectedIconPath": "/images/tabBar/contact-active.png"
    }
  ]
  },

block标签:

< block > 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

样例:

<view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>

  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },

 data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },

当我们想要一次性判断多个组件标签时可以用block包裹,并在后跟wx:if来判断,如上述例子一样,当未获取用户信息时显示的一个请求获取用户信息的按钮,当已获取用户信息后显示内容为< image >标签和< text>标签.