微信小程序左侧滑栏实现原理及步骤详解是怎样的？

本文共计1227个文字，预计阅读时间需要5分钟。

前言：一愿望给项目中的小程序设置侧滑栏，将退出按钮放到侧滑中，但小程序没有提供相应的控件和API，因此只能自己手动实现。网上很多大神造的轮子非常不错，本文就记录一下如何在站上巨人DCloud的脚跟上添砖加瓦。

...（此处省略，因为已经超出100字限制）...

前言

一直想给项目中的小程序设置侧滑栏，将退出按钮放到侧滑中，但是小程序没有提供相应的控件和API，因此只能自己手动实现，网上很多大神造的轮子很不错，本文就在是站在巨人的肩膀上实现。

hexo图片不显示问题，可前往简书

效果

先看看效果，我的侧滑栏需要列出如下信息：

初始状态下，左下角设置悬空按钮

点击悬空按钮，侧边栏拉出，悬空按钮旋转180度

主页内容向右滑动一定比例，并设置阴影遮罩

实现

首先将xml文件分为三部分，一部分是主页内容，一部分是侧滑栏内容，一部分是悬浮按钮。