微信小程序开发日记——高仿知乎日报（上） - iyifei(4)_H5之家

以上是侧栏的一个简单的布局和样式，包含了侧栏中的用户信息块和主题日报列表。当然这些信息是需要通过js的中网络请求来获取的。侧栏结构上边有一个class为slide-mask的view，这是一个遮罩元素，当侧栏弹出的时候，侧栏后边就有一层轻微透明的黑色遮罩。侧栏的高度和宽度初始是不定的，需要在进入页面的时候，马上获取设备信息来获取屏幕的高度宽度调整侧栏样式。

//获取设备信息，屏幕的高度宽度 onLoad: function() { var _this = this; wx.getSystemInfo( { success: function( res ) { _this.setData( { screenHeight: res.windowHeight, screenWidth: res.windowWidth, slideHeight: res.windowHeight, slideRight: res.windowWidth, slideWidth: res.windowWidth * 0.7 }); } }); }

宽度我取了屏幕宽度的70%，高度一致。侧栏的弹出收回动画使用内置动画API

//侧栏展开 function slideUp() { var animation = wx.createAnimation( { duration: 600 }); this.setData( { maskDisplay: 'block' }); animation.translateX( '100%' ).step(); this.setData( { slideAnimation: animation.export() }); } //侧栏关闭 function slideDown() { var animation = wx.createAnimation( { duration: 800 }); animation.translateX( '-100%' ).step(); this.setData( { slideAnimation: animation.export() }); this.setData( { maskDisplay: 'none' }); }