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

今天也是努力写毕设的一天~
这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~

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

《微信小程序自定义底部导航栏遮挡页面内容(已解决)》

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

《微信小程序自定义底部导航栏遮挡页面内容(已解决)》

修改一下背景颜色,看的更清楚一点

《微信小程序自定义底部导航栏遮挡页面内容(已解决)》
wxml

<!-- 解决底部导航栏遮挡页面内容,自己加一个view -->
<view class="standView"></view>

wxss

/* 解决底部导航栏遮挡的占位view的样式 */
.standView{
  width: 100%;
  height: 150rpx;     /*  自定义一下需要的高度 */
  /* background-color: black; */
}
    原文作者:time ocean
    原文地址: https://blog.csdn.net/weixin_43889700/article/details/116406283
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞