前言

成都创新互联专注于企业营销型网站建设、网站重做改版、崇明网站定制设计、自适应品牌网站建设、H5建站、商城建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为崇明等各大城市提供网站开发制作服务。

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

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

效果

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

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

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

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

实现

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

 
  
   
     点击获取头像昵称 
    
     
     {{userInfo.nickName}}
    
   
   
    用户：{{YHMC}}
    账号：{{YHZH}}
    角色：{{YHJS}}
    版本：{{version}}
   
   
    
     退出登录
    
   
  
 

 
  
   {{motto}}
  
 
 
 
  
 

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

标题名称：微信小程序实现左侧滑栏过程解析-创新互联
转载来源：http://azwzsj.com/article/cceoio.html