微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色

背景：

在微信小程序的实际开发过程中，有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色，以满足项目需求

解决方案：

方式一：

通过tabBar组件自带的 borderStyle 属性来控制边框的颜色，将边框的颜色设置为白色，如下代码：

"borderStyle": "white",

全部代码：

app.json文件

   "tabBar": {    "color": "#7B7E82",    "selectedColor": "#333333",    "borderStyle": "white",    "list": [{      "pagePath": "pages/index/index",      "text": "首页",      "iconPath": "images/home_default.png",      "selectedIconPath": "images/home_select.png"    },{      "pagePath": "pages/index/index",      "text": "服务预约",      "iconPath": "images/service_default.png",      "selectedIconPath": "images/service_select.png"    },{      "pagePath": "pages/cemetery/cemetery",      "text": "公墓服务",      "iconPath": "images/cemetery_default.png",      "selectedIconPath": "images/cemetery_select.png"    },{      "pagePath": "pages/me/me",      "text": "我的",      "iconPath": "images/me_default.png",      "selectedIconPath": "images/me_select.png"    }]  }

但是，通过这种方式，只能设置 white和 black ，如若不是，会爆以下错误：

方式二：

1、首先将 tabBar组件自带的 borderStyle 的颜色设置为 white (因为默认背景色为白色，将边框设置为白色，就相当于隐藏边框)

2、给app.wxss添加如下样式，已达到自定义 tabBar 颜色的目的(其实就是在页面的底部自定义一条线)

 /**修改tabbar线条：**/page::after{  content: "";  position: fixed;  left: 0;  bottom: 0;  width: 100%;  height: 2rpx;  background-color: #EEEEEE;  z-index: 9999;}

效果图：

注意：

如若其它页面不需要底部的边框线，那么只需要给当前页面的.wxss文件添加一个覆盖page样式的代码，具体如下：

page::before{    height: 0rpx;}

微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色相关推荐

自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
微信小程序IOS IphoneX上边框显示不全
今天调试页面微信开发工具上看没有任何问题,安卓疯7的真机也没问题到了疯X上出了问题如下图如图显示不全看了代码设置如下各种摸不到头脑 ---------------------------- ...
小程序数据框有重影_详解小程序输入框闪烁及重影BUG解决方案
前言本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标 ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
自定义微信小程序tabBar，兼容iPhone异形全面屏
需求开发微信商城会员中心,tabBar有首页及用户中心,当用户没有登录时点击页面任意位置均弹出登录窗口.但是自带的微信tabBar无法被弹出的遮罩层覆盖,从而可以在两个tab之间切换. 解决自己手 ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
Wuss Weapp一款高质量，组件齐全，高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库文档 https://phonycode.github.io/wuss-weapp 扫码体验使用微信扫一扫体验小程序组 ...
Wuss Weapp 一款高质量，组件齐全，高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库文档 https://phonycode.github.io/wuss-weapp 扫码体验使用微信扫一扫体验小程序组 ...

微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色

背景：

解决方案：

方式一：

方式二：

微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色相关推荐

最新文章

热门文章