微信小程序获取tabbar的高度_微信小程序自定义tabbar

小程序在基础库2.5.0开始支持的了自定义的tabbar，那么可以自定义更美观、更实用、更突显程序主要功能的tabbar了

我的项目是因为产品对iPhone下的tabbar没有垂直居中不满意，没办法只有改咯。

首先需要在app.json中将tabbar改成自定义的

"custom": true //自定义属性

然后在根目录下创建custom-tab-bar/index组件页面

贴代码了：

wxml

首页

限购

团购

我的

wxss

._tabbar {

width: 100%;

height: 120rpx;

display: flex;

align-items: center;

background: #fff;

font-size: 26rpx;

color: #999999;

box-shadow: 0px -7rpx 13rpx 0px rgba(193, 185, 204, 0.13);

}

._tabbar .titem {

text-align: center;

width: 25%;

}

._tabbar .titem image {

display: block;

margin: auto;

width: 48rpx;

height: 48rpx;

margin-bottom: 10rpx;

}

._tabbar .tCdk {

color: #37ADFE;

}

._iPhoneX {

height: 148rpx;

}

js iphone X系列屏幕下面的返回线比较粗所以需要适配iPhoneX

// custom-tab-bar/index.js

Component({

/**

* 组件的属性列表

properties: {

/**

* 组件的初始数据

data: {

_tabbat: 0,

iPhoneX: false,

urls: [

'/pages/home/index/index',

'/pages/limitBuy/index',

'/pages/groupBuy/index/index',

'/pages/member/index/index',

]

attached() {

var self = this

wx.getSystemInfo({

success(res) {

console.log(res.model)

if (res.model.indexOf('iPhone X') >= 0) {

self.setData({

iPhoneX: true

})

}

})

/**

* 组件的方法列表

methods: {

switchTap: function (e) {

var self = this

var index = e.currentTarget.dataset.index;

var urls = self.data.urls

wx.switchTab({

url: urls[index],

})

}

})

最后在引用的页面用getTabBar()获取自定义tabbar组件的实例控制是否选中

/**

* 生命周期函数--监听页面显示

onShow: function () {

this.getTabBar().setData({

_tabbat: 0

})

微信小程序获取tabbar的高度_微信小程序自定义tabbar相关推荐

微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
小程序获取城市行政区号_微信小程序省市区选择器实例详解(附源码下载)
微信小程序省市区选择器: 最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换思路是:拿当前的c ...
小程序获取城市行政区号_支付宝小程序开发——获取位置API没有城市区号的最佳处理方案...
前言: 需要对城市区号进行判断,但是支付宝小程序提供的my.getLocation() API返回的数据中只有6位的城市行政代码,诸如:深圳(440300),并没有区号(0755),那么怎么办呢? 需 ...
微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
获取当前系统日期和时间在小程序中,新建项目时,就会有一个utils.js文件,就是获取日期和时间的,代码如下: utils.js: function formatTime(date) {var ye ...
微信登录画面_微信登录界面的地球变了_微信登录界面首变真相
细心的小伙伴发现在启动微信的时候,那个经典的一个小人剪影面对着地球的画面开始发生了一些变化,似乎云层变得更为清晰细致了.微信登录界面6年来首变化,那么为何改变来的如此突然呢,下面小编就分享给大家! 手 ...
微信公众号怎么推送消息_微信公众号发送消息
A.模板消息发送模板消息仅用于公众号向用户发送重要的服务通知,只能用于符合其要求的服务场景中,如信用卡刷卡通知,商品购买成功通知等.不支持广告等营销类消息以及其它所有可能对用户造成骚扰的消息. 备注 ...
小程序---获取view的高度
在我们做小程序的时候, 难免会碰到需要将界面分成俩部分来展示上下俩个部分, 这时我们就需要计算上部分view框的高度, 好让下部分填满整个界面一种方法是把上部分view的高度固定,单位用rpx .然 ...
微信小程序等待几秒、_微信小程序—setTimeout定时器的坑
背景实验室需要将项目的app搬到微信的小程序上,终于知道为什么程序员是手艺人了,只要有需求,就要想方设法去填充这种需求,去年是小程序的元年了可以说,去年冬天一个叫跳一跳的小程序游戏出现在我的微信中, ...
php获取微信小程序用户头像,微信小程序获取用户头像+昵称+openid，小程序登录！附前端后端源码！...
做一款小程序,如果需要判断用户,当然要获取一些基本信息,例如头像,昵称,openid.所以本次案例就直接上代码了. 小程序前端 index.wxml 获取头像昵称 {{userInfo.nickNam ...
php对接小程序获取表单,PHP实现微信小程序用户授权的工具类
事先准备工作 1.申请一个小程序,申请地址:传送门 2.仔细阅读小程序的用户授权登陆官方文档:<用户授权登陆的流程> 3.仔细阅读微信用户数据解密的相关文档:<用户数据解密说明文档& ...

微信小程序获取tabbar的高度_微信小程序自定义tabbar

微信小程序获取tabbar的高度_微信小程序自定义tabbar相关推荐

最新文章

热门文章