小程序遮罩层与弹出导航栏的通用实现

早点睡觉不要脱发

于 2020-09-29 09:56:30 发布

阅读量1.4k

点赞数 1

分类专栏：前端笔记文章标签： javascript css 小程序

本文链接：https://blog.youkuaiyun.com/weixin_46420789/article/details/108861617

版权

本文介绍了如何在小程序中实现点击目录显示左侧边导航栏，并配合遮罩层实现优雅的退出功能。利用JavaScript和CSS，通过绝对定位、动态样式修改以及动画效果，实现了遮罩层的显示与隐藏，以及侧边栏的滑动弹出。关键代码包括wxml中的遮罩层和侧边栏视图，以及js中控制显示状态的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
点击目录出现左侧边导航栏,右侧粉紫色为遮罩层,点击遮罩层退出侧边栏回到文章内容

思路:文章内容为底层,绝对定位建立一个标签.在底层之上再建立一个绝对定位view当做遮罩层,左侧淡黄色侧边栏默认绝对定位在屏幕左侧-60%,触发目录的点击事件之后将绝对定位从left:-60%改为left:0,这样一个width:60%的侧边栏就出现了,再通过js与css中的代码即可实现一个动画弹出效果,上传下重要代码
wxml:

<!--侧边栏实现-->
<view class="showView" wx:if="{
   {
   isShow}}" catchtap="cancel"></view>
  <!--侧边栏-->
  <view class="leftNavigation" style="left:{
   {
   clickmulu ? '0' : '-60%'}}">

第一个view建立一个遮罩层:
wx:if="{ {isShow}}通过判断isShow是true或false来决定显示与否.
catchtap="cancel"点击事件来改变isShow的值去隐藏遮罩层
第二个view建立侧边栏,style用来动态改变侧边栏的位置,clickmulu为true则为left:0 ,即显示,为false则left:-60%,即隐藏在屏幕左侧.

js: