微信小程序 - 自定义tabbar（组件）

发布时间：2020-12-16 23:38:25 所属栏目：百科来源：网络整理

导读：? ? ? ? ? 配置项（关于使用组件） ? ? index.wxml !-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致)--tabbar data="{{tabBar}}" activeIndex="0" solts="{{solts}}" view slot="index"index1.../view view slot="other"ot

配置项（关于使用组件）

index.wxml

<!-- 
  tabBar:tabBar配置
  activeIndex: 激活页面下标
  slots: 多插槽配置(需与页面一致)
-->

<tabbar data="{{tabBar}}" activeIndex="0" solts="{{solts}}">
  <view slot="index">index1...</view>
  <view slot="other">other2...</view>
  <view slot="my">my3....</view>
  <view slot="hello">hello...4</view>
  <view slot="bat">bat...5</view>
</tabbar>

index.js（data）

  tabBar: {
      "selectedColor": "#5DBCFF","normalColor": "#333","backgroundColor": "#fff","selectedBackgroundColor": "#fff","list": [{
        "pagePath": "market/index/index","iconPath": "images/icon_home.png","selectedIconPath": "images/icon_home_selected.png","text": "首页"
      },{
        "pagePath": "tools/index/index","iconPath": "images/icon_cate.png","selectedIconPath": "images/icon_cate_selected.png","text": "分类"
      },{
        "pagePath": "viewing/index/index","iconPath": "images/icon_member.png","selectedIconPath": "images/icon_member_selected.png","text": "我"
      },"text": "Hello"
      },"text": "Bat"
      }]
    },solts: [{
      name: ‘index‘
    },{
      name: ‘other‘
    },{
      name: ‘my‘
    },{
      name: ‘hello‘
    },{
      name: ‘bat‘
    }]

示例：点击下载

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!