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

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

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

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

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

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

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

微信小程序自定义底部导航栏遮挡页面内容(已解决)_第3张图片
wxml



wxss

/* 解决底部导航栏遮挡的占位view的样式 */
.standView{
  width: 100%;
  height: 150rpx;     /*  自定义一下需要的高度 */
  /* background-color: black; */
}

你可能感兴趣的:(小程序,wxss,底部导航栏自定义,遮挡界面)