微信小程序之tabBar

1、tabBar

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色,仅支持十六进制颜色
selectedColor HexColor tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColor HexColor tab 的背景色,仅支持十六进制颜色
borderStyle string black tabbar 上边框的颜色, 仅支持 black / white
list Array tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab

其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath string 页面路径,必须在 pages 中先定义
text string tab 上按钮文字
iconPath string 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 positiontop 时,不显示 icon。
selectedIconPath string 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 positiontop 时,不显示 icon

在app.json中配置:

XML 复制代码
 "tabBar": {
    "backgroundColor":"#F12467",

  "list":[
      {
          "text": "首页",
          "pagePath": "pages/navigationBar/navigationBar",
          "iconPath": "/static/icon/home.png",
          "selectedIconPath": "/static/icon/home-fill.png"
      },{
        "text": "我的",
        "pagePath": "pages/test1/test1",
        "iconPath": "/static/icon/user (2).png",
        "selectedIconPath": "/static/icon/user.png"
      }
    ]

图标可以在iconfont-阿里巴巴矢量图标库中获取

2、api中navigate路由接口与组件的关系

navigator

|-----------|--------|-------------|
| url | string | 当前小程序内的跳转链接 |
| open-type | string | 跳转方式 : |
| | 合法值 | 说明 | |----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | navigate (默认值) | 对应 wx.navigateTowx.navigateToMiniProgram 的功能 | | redirect | 对应 wx.redirectTo 的功能 | | switchTab | 对应 wx.switchTab 的功能 | | reLaunch | 对应 wx.reLaunch 的功能 | | navigateBack | 对应 wx.navigateBackwx.navigateBackMiniProgram (基础库 2.24.4 版本支持)的功能 | | exit | 退出小程序,target="miniProgram"时生效 | |||

案例1:navigate和reLaunch :
XML 复制代码
<navigator url="/pages/showToast/showToast?id=12345&name=lisi"  style="margin-bottom: 20rpx;">
  go to showToast 非tabBar页面
</navigator>
<!--open-type: 跳转方式,不写的话默认是navigate
    reLaunch 和 switchTab都可以进行tabBar页面的跳转,
    但是reLaunch可以携带参数
-->
<navigator url="/pages/wxfor/wxfor?id=12345&name=lisi" open-type="reLaunch">
  go to wxfor tabBar页面
</navigator>
案例2: 点击事件进行页面跳转

tabBar页面的话就用wx.reLaunch(Object object)

非tabBar页面就用wx.navigateTo(Object object),因为reLaunch没有左上角的返回箭头:

XML 复制代码
<view bind:tap="goNavigate" style="width: 200rpx;height: 200rpx;background: chartreuse;">
    <view>
      <text>
      
      </text>
    </view>

    <view></view>
</view>
XML 复制代码
  goNavigate(){
    // wx.reLaunch({
    //   url: "/pages/wxfor/wxfor?id=12345&name=lisi"
    // })

    wx.navigateTo({
      url: '/pages/scrollView/scrollView?id=12345&name=lisi',
    })
  },
案例3:navigateBack() 回到上一个页面

3、wx.request获取网络请求并渲染页面

|----------|----------|---|--------------------------|
| success | function | 否 | 接口调用成功的回调函数 |
| fail | function | 否 | 接口调用失败的回调函数 |
| complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |

我们先测试一下这段代码的返回结果:

XML 复制代码
Page({

  /**
   * 页面的初始数据
   */
  data: {
      listArr:[]
  },
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.getData();
  },

  getData(){
      wx.request({
        url: 'https://api.thecatapi.com/v1/images/search?limit=2',
        success:res=>{
            console.log(res)
            this.setData({
              listArr:res.data
            })
        }
      })
  },

.wxml:

XML 复制代码
<view class="out">
  <view class="box" wx:for="{{listArr}}">
      <view class ="pic">
        <image src="{{item.url}}" mode="aspectFill" ></image>
      </view>
      <view class="name">
        姓名是:{{item.id}}
      </view>
  </view>
</view>

.js:

XML 复制代码
/* pages/wxRequest/wxRequest.wxss */
.out{
  padding:30rpx;
}
.out.box{
  border:20px solid rgb(241, 18, 18);
  width: 100%;
  height: 500rpx;
  margin-bottom: 30rpx;
}
.out .box .pic{
  width: 100%;
  height: 400rpx;
}
.out .box .pic image{
  width: 100%;
  height: 100%;
}
.out .box .name{
  text-align: center;
  line-height: 100rpx;
}
相关推荐
2501_9159090638 分钟前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
三原13 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me14 小时前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_233316 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
難釋懷21 小时前
微信小程序案例 - 本地生活(首页)
微信小程序·生活·notepad++
2501_915921431 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
说私域2 天前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的2 天前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
2301_805962932 天前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero2 天前
微信小程序121~130
微信小程序·小程序