微信小程序之自定义tabbar

0. 官方指南

# 由于微信小程序的异步机制,页面跳转会出现随机事件
# 目的: 解决认证跳转过程的不友好体验
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1. app.json文件的处理

1. 添加:"custom": true,使用自定义的tabbar
2. 将非tabbar的内容删除,删除的示例是发布,如下:

"tabBar": {
"custom": true,
"selectedColor": "#CD5C5C",
"list": [
  {
    "pagePath": "pages/home/home",
    "text": "首页",
    "iconPath": "static/tabbar/ic_menu_choice_nor.png",
    "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
  },
  {
    "pagePath": "pages/auction/auction",
    "text": "拍卖",
    "iconPath": "static/tabbar/ic_menu_me_nor.png",
    "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
  },
  {
    "pagePath": "pages/message/message",
    "text": "消息",
    "iconPath": "static/tabbar/ic_menu_me_nor.png",
    "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
  },
  {
    "pagePath": "pages/index/index",
    "text": "我的",
    "iconPath": "static/tabbar/ic_menu_me_nor.png",
    "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
  }
]

},

2. 创建组件目录

-component
    -tabBar
        -tabbar.js
        -tabbar.json
        -tabbar.wxml
        -tabbar.wxss
        

3. js文件解读:

// component/tabbar/tabbar.js
var app = getApp()
Component({
  /**
   * 组件的属性列表:selected--标记tabbar的index,
   */
  properties: {
    selected: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    color: "#7A7E83",
    "selectedColor": "#CD5C5C",
    "list": [
      {
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "/static/tabbar/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "/pages/auction/auction",
        "text": "拍卖",
        "iconPath": "/static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "/static/tabbar/ic_menu_me_pressed.png"
      },
      {
        "text": "发布",
      },
      {
        "pagePath": "/pages/message/message",
        "text": "消息",
        "iconPath": "/static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "/static/tabbar/ic_menu_me_pressed.png"
      },
      {
        "pagePath": "/pages/index/index",
        "text": "我的",
        "iconPath": "/static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "/static/tabbar/ic_menu_me_pressed.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   * switchTab:跳转到tabbar页面,即首页,拍卖,消息,我的,四个自定义tabbar页面
   * navigateTo:只能跳转到非tabbar页面,示例是发布页面:"/pages/publish/publish"
   */
  methods: {

    switchTab(e) {
      var data = e.currentTarget.dataset
      var url = data.path;
      console.log(url)
      if (url) {
        wx.switchTab({ url });
      } else {
        if (app.globalData.userinfo) {
          wx.navigateTo({
            url: "/pages/publish/publish",
          })
        } else {
          wx.navigateTo({
            url: '/pages/login/login',
          })
        }
      }
    }
  }
})

3. js文件解读:

# component:true       ---即表示使用自定义tabbar
{
"component": true,
"usingComponents": {}
}

wxml 文件示例

# wx:for 循环list列表,生成自定义的tabbar标签

# 三元运算表达式:判断tabbar标签是否选中
    - src="{{selected === index ? item.selectedIconPath : item.iconPath}}"

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>

  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}"  bindtap="switchTab">

    <block wx:if="{{ index === 2}}">
      <cover-view class="pub">{{item.text}}</cover-view>
    </block>

    <block wx:else>
      <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
      <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </block>

  </cover-view>
</cover-view>

4. wxss 文件示例

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index:998
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

.pub{
  background-color: #fa3d;
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

5. 应用实例:home页面(tabbar)

# 两步骤即可
    - selected:即为tabbar.js 文件中的properties属性列表,
    - selected: 标记tabbar的index,

1. home.json: "tabbar": "/component/tabBar/tabBar"

    - {
      "usingComponents": {
        "tabbar": "/component/tabBar/tabBar"
      },
      "enablePullDownRefresh": true
    }

2. home.wxml: 

    - <tabbar selected="{{0}}"></tabbar>
    - ......

6. 对于非tabbar的发布,不用做任何操作

原文地址:https://www.cnblogs.com/daviddd/p/12273837.html

时间: 2024-10-01 02:37:11

微信小程序之自定义tabbar的相关文章

微信小程序把玩(三)tabBar底部导航

原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了:

微信小程序之自定义toast弹窗

微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加模板代码 <template name="toast"> //nam

微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面

如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 wx.switchTab({url: '...',}) 来实现. 那么,我们反过来,如何从含有tabbar的页面跳转到一个不含有/隐藏了tabbar的页面呢? 在尝试了上述的两个API后发现不起作用,wx.switchTab({url: '...',}) 倒是可以在有tabbar的页面之间跳转,但无法

微信小程序封装自定义弹窗

最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中: 在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"> <view class='d

微信小程序覆盖自定义组件样式

小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp.iviewui.com/所提供的组件样式为例,它定义了一个外部类接口: 1. 通过第三方组件给出的externalClasses: ['i-class'],来指定自己的样式类 自己的wxml i-class="myrate" <i-rate i-class="myrate&

微信小程序中的tabBar设置

我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结 注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的 这个tabBar属于全局属性,因此就在全局配置文件app.json中配置 1.tabBar的配置 "color": "#8a8a8a", "selectedColor": "#f40",//选中的颜色 "backgroundColor": "#ffffff

微信小程序之自定义模态弹窗(带动画)实例

1.基本需求. 实现用户自定义弹框 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 获取弹出框的内容,自定义事件获取 2.案例目录结构 二.程序实现具体步骤 1.弹框index.wxml代码 <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">来点我呀</view> <!--mask--> <

微信小程序picker-view自定义日期时间等

picker-view 可以自定义地区时间什么的,其实主要是可以修改样式啦. <view class='login-user border-none' bindtap='data_click'> <view class='user-t'>生日</view> <view class='user-i'> <input placeholder="请输入生日" disabled value='{{birthday}}' /> <

微信小程序开发---自定义组件

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成.要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件):同时,还要在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法