- 效果图
- 对于底部tab导航和顶部侧边抽屉导航，一直觉得底部导航用的很习惯，顶部侧边导航觉得操作起来很不方便
- 在我做信息流展示的时候，突然觉得底部tab会占用浏览屏幕时，信息流展示的空间，此时侧边栏+顶部tab导航我觉得对于信息展示很清楚有效
- 底部tab我觉得适合频繁切换，利用tab将不同的功能模块分开
- 同时也有很多将这两者结合，充分利用顶部侧边导航和底部tab，底部tab在上滑的时候隐藏，下滑显示
- 备注：显示隐藏tab微信有api可以实现，同时监听上滑下滑，可以参考我之前写的卡片滑动切换
- 将顶部原有的导航栏去掉，使得自己的素材可以达到屏幕顶部(微信小程序全局配置里的navigationStyle设为custom即可)
- 侧边栏点击滑动显示
- 点击空白位置滑动退出
- 点击底部返回按钮同样滑动退出
- 如果需要空白位置的遮罩，则将css文件里shadow部分注释的 background-color: rgba(0,0,0,0.1); 解开即可
- 如果全局配置里的navigationStyle设为custom，在其他页面也会没有顶部导航，需要自己设计顶部导航，这一点有点麻烦。
- 用微信小程序的wx.createAnimation(OBJECT)实现效果
- 用css3的动画实现效果
- 将该侧边抽屉导航封装成了一个组件
- 总体来说使用微信封装的动画更为方便
- 注意消失侧边导航的时候，显示隐藏参数延时0.5秒，因为如果直接消失，滑动动画则无法看到
- 根据变量变化切换css
- 有两个显示主要的参数，一个负责整体的显示隐藏，一个负责动画的启动与否，整体的隐藏时有一个0.5秒的延时，而负责动画的启动与否则即时启动，达到可以看到完整动画的效果
- 这是一个提取之前代码的连贯过程，我觉得这个功能封装为一个模块很精简实用，所以就做了一个初学者组件
- 留了一个solt，可以自己插入侧边导航的内容
- slot里的样式可以在父组件里书写
- 成功尝试将子组件里的数据通过事件监听，返回到父组件