微信小程序实现滑动侧边栏

<view class="page" catch:touchstart="pageTouchStartHandler" catch:touchend="pageTouchEndHandler">
  This is Body
  <view class="sideBar" style='{{sideBarStyle}}'>
  This is sideBar
  </view>
</view>

.sideBar {
  background: red;
  position: fixed;
  width: 300px;
  height: 100%;
  top: 0;
  right: 0;
  transform: translate(300px);
  transition: all 0.5s ease-out;
}


var touchStartPoint
Page({
  pageTouchStartHandler: function (e) {
    // 记录开始时的坐标
    touchStartPoint = e.changedTouches[0].pageX
  },
  pageTouchEndHandler: function (e) {
    // 当前触摸点坐标
    var currentTouchPoint = e.changedTouches[0].pageX  

    // 左滑
    if (currentTouchPoint - touchStartPoint < -50) {
      this.setData({
        sideBarStyle: 'transform:translate(0)'
      })
    }
    // 右滑
    if (currentTouchPoint - touchStartPoint > 50) {
      this.setData({
        sideBarStyle: 'transform:translate(300px)'
      })
    }
  },

})