微信小程序自定义底部导航栏遮挡页面内容（已解决）

最新推荐文章于 2024-04-24 15:21:56 发布
VIP文章 最新推荐文章于 2024-04-24 15:21:56 发布
阅读量6.9k 收藏 11
点赞数 8
文章标签： 小程序 wxss 底部导航栏自定义 遮挡界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43889700/article/details/116406283
版权
今天也是努力写毕设的一天~
这几天在实现旅行日记的笔记详情界面，先实现了自定义的底部导航栏，在这里我使用的是iView Weapp，具体的介绍我放在这里了~

快速上手 iView Weapp
跟着里面的介绍下载代码再放到自己的项目里就可以了，最方便吸引我的是，里面的icon图标点击就可以复制相关代码，(๑•̀ㅂ•́)و✧其他使用也很方便

在这里插入图片描述

点击展开，当文本过长就会遮挡文本，显示不了收起按钮。最终的解决办法是一个投机取巧的办法，利用一个view 做占位符
图中紫色框标记就是这个view

最低0.47元/天 解锁文章
time ocean
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序自定义底部导航栏原生语法
08-10
微信小程序自定义底部导航栏（原生语法）
微信小程序自定义tabBar遮挡底部内容简单处理方法
qq_18470209的博客
01-15 3364
自定义获取高度填充。
uni-app前端H5页面底部内容被tabbar遮挡
qq_44792224的博客
11-09 2558
在用uniapp写小程序的时候，底部有一部分内容没显示出来，被底部的tabbar遮挡住了。
微信小程序vant自定义tabBar组件遮挡底部内容
qq_34082921的博客
01-19 1317
直接在页面底部，添加view，，把tabBar的高度挤出来" >
uniapp：自定义底部导航栏
热门推荐
sunluyi的博客
10-09 1万+
uview>tabbar组件 1、在pages.json中正常定义tabbar逻辑和字段，只需配置tabBar字段list中的pagePath(需以"/"开头)属性即可 "tabBar": { // 设置底部 tab 的表现 "color": "#333333", "selectedColor": "#fa2c19", "borderStyle": "black", "backgroundColor": "#fff", "list": [{ "pagePath": "p.
如何在uniapp中弹出层弹出时遮住自带的tabbar
前端小陈的成长记录
06-07 8755
vue3、uniapp中弹出层实现、如何遮挡自tabbar
微信程序 自定义遮罩层遮不住底部tabbar解决
IT_iosers的博客
08-16 3129
实现：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 官网去抄简单写下：在代码根目录下添加入口文件除了js 文件的list 需要调整 其他原封不动代码：js部分data: {list: [{ // 同app.json下的tabbar列表"text": "淘楼"},"text": "我的"},methods: {url})})})jsonwxml</</
解决微信小程序tabBar自定义弹窗遮挡不住
小陈的博客
02-07 5408
这个方法就是完全放弃微信官方的tabbar；自己用SPA的方式去实现一个tabbar;这个方法的优点tabbar能自己定制化；顺手也解决了盖不住的问题；缺点在于：要自己实现微信官方的实现的功能比如wx.switchTab等基础功能需要自己实现路由管理需要比较大测试成本整体实现成本还是比较大的，具体实现方法这里不做演示，感兴趣的可以自行找相关的文章；社区有许多这个文章。
微信小程序自定义tabbar遮挡scroll-view问题
qq_51226378的博客
09-23 952
转换完成之后，设置scroll-view高度，将屏幕高度减去距离顶部的高度，再减去导航栏高度即可。2.我的导航栏高度单位为rpx，那就需要将页面所有控件改为rpx，同时将获取的屏幕高度转为rpx。3.单位为px的，获取完高度后直接减。1.获取用户手机宽度和高度。
uni-app遮罩遮住小程序tabbar
偏执的小男孩儿
10-31 634
uni-app遮罩遮住小程序tabbar
微信小程序 自定义头部导航栏 navigationStyle
08-03
&平板设备，在某些时候，不想要自带的顶部导航栏，需要自己定义，这时可以将自定义的导航栏做成一个组件，然后做一下初始配置，在每个页面引用，初始化，即可得到一个自定义的顶部导航栏，即可在当前页面自定义左右...
微信小程序自定义导航栏实例代码
12-01
背景 在做快狗打车小程序时，关于默认导航栏，我们遇到了以下的问题： Android、IOS手机对于页面title的展示不一致，安卓title的显示不...小程序支持自定义导航栏，只需要在app.json文件中，window项中配置 "navi
陪诊小程序的市场潜力与发展趋势研究
最新发布
2402_83689311的博客
04-24 230
随着社会的快速发展和人口老龄化的加剧，医疗服务需求日益增长，而陪诊服务作为医疗服务的重要补充，正逐渐受到人们的关注和青睐。陪诊小程序利用互联网技术，将陪诊服务与用户需求紧密连接，提高了服务的便捷性和效率。他们往往需要更加细致的照顾和陪伴，而陪诊小程序能够提供专业的陪诊服务，满足老年人的需求。随着技术的不断创新和市场的不断拓展，陪诊小程序将在未来医疗服务领域发挥更加重要的作用，为人们的生活带来更多便利和舒适。通过拓展海外市场，引入国际先进的陪诊服务理念和模式，提升陪诊小程序的国际竞争力。
【免费源码下载】完美运营版商城 虚拟商品全功能商城 全能商城小程序 智慧商城系统 全品类百货商城php+uniapp
仿站、源码搭建/迁移技术博客
04-21 234
完美运营版商城/拼团/团购/秒杀/积分/砍价/实物商品/虚拟商品等全功能商城干干净净 没有一丝多余收据 还没过手其他站 还没乱七八走的广告和后门后台可以自由拖曳修改前端UI页面 还支持虚拟商品自动发货等功能 挺不错的一套源码前端UNIAPP 后端PHP 一键部署版本。
微信原生小程序封装用户登陆
qq_59626859的博客
04-18 382
open-type是小程序中button的属性之一，合法霍倩倩getUserInfo,引导用户授权，可以从bindgetuserinfo回调中获取到用户信息。button可以指定plain属性，完全去掉样式，跟view类似。后端在用户登陆后会返回resfreshToken和token；
【微信小程序从入门到精通（项目实战）】——微电影小程序
php优质创造者
04-18 2965
如果还要不懂运行不出效果可以私信博主
怎样快速打造二级分销小程序
lin13600956163的博客
04-21 418
乔拓云提供了两种分销模式供商家选择。在这里，商家可以看到乔拓云强大的分销功能，轻松选择适合自己的分销模式。商家可以在乔拓云的官方网站上了解到详细的费用一览表，根据自己的预算选择合适的版本进行使用。值得一提的是，商城开通分销功能后，不仅具备了一级分销商的功能，还支持一级分销商继续发展下级分销商，从而产生二级分销商。在这个过程中，商家可以根据自己的需求添加分销中心页面、设置分销规则等，实现个性化的分销策略。通过套用乔拓云提供的精美模板，商家无需具备专业的技术背景，也能轻松打造出功能齐全、美观大方的小程序。
分享一些常用的小程序免费源码
zuoliangzhu的专栏
04-21 296
java实现小程序和网页在线聊天、即时通讯。微信小程序自定义底部tabBar实例。自定义图片上传组件源码。小程序注册、登录源码。生成微信小程序二维码。
微信小程序自定义底部导航栏的代码
03-28
在微信小程序中，自定义底部导航栏的代码如下： ```html <view class="tab-bar"> <view class="tab-item" wx:for="{{tabs}}" wx:key="{{item.id}}" bindtap="switchTab" data-id="{{item.id}}"> <image class="tab-icon" src="{{item.icon}}" /> <text class="tab-title">{{item.title}}</text> </view> </view> ``` 在上面的代码中，我们使用了一个 `view` 标签作为底部导航栏的容器，并在其中使用了一个 `wx:for` 循环渲染每个导航项。每个导航项都是一个 `view` 标签，并包含了一个图标和一个标题。我们还为每个导航项绑定了一个 `bindtap` 事件，用于在用户点击导航项时切换页面。 接下来，我们需要在页面的 `js` 文件中定义导航项的数据和切换页面的逻辑： ```javascript Page({ data: { tabs: [ { id: 0, title: '首页', icon: '/images/home.png', url: '/pages/index/index' }, { id: 1, title: '消息', icon: '/images/message.png', url: '/pages/message/message' }, { id: 2, title: '我的', icon: '/images/me.png', url: '/pages/me/me' } ], activeTab: 0 }, switchTab: function(e) { const id = e.currentTarget.dataset.id const tab = this.data.tabs.find(item => item.id === id) if (tab) { wx.switchTab({ url: tab.url }) this.setData({ activeTab: id }) } } }) ``` 在上面的代码中，我们使用了一个 `data` 对象来保存导航项的数据和当前选中的导航项。在 `switchTab` 方法中，我们通过点击事件获取到用户点击的导航项的 `id`，然后在导航项数组中查找对应的导航项，并使用 `wx.switchTab` 方法切换到对应的页面。最后，我们使用 `setData` 方法更新当前选中的导航项的 `id`。 最后，我们还需要在 `wxss` 文件中定义导航栏的样式： ```css .tab-bar { display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 100rpx; background-color: #fff; box-shadow: 0 -1px 5px #ddd; } .tab-item { display: flex; flex-direction: column; align-items: center; } .tab-icon { width: 50rpx; height: 50rpx; } .tab-title { font-size: 24rpx; margin-top: 10rpx; } ``` 在上面的代码中，我们使用了 `flex` 布局来将导航项平均分配到底部导航栏中，并设置了一些基本的样式，如高度、背景色、阴影等。我们还为导航项的图标和标题设置了一些样式，如大小、间距、字体大小等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值