微信小程序页面缩放式侧滑效果的实现代码

<view class='page {{isFix?"pageShow":"pageHide"}}' >
  <view class='header'>    
    <view class='h-toggle iconfont icon-list' bindtap='pageBtn'></view>
  </view>
</view>
<view class='r-box {{isFix?"fixShow":"fixHide"}}' bindtap='fixHide'>
  <view class='r-list' catchtap='fixStopBu'>
    <view class='rl-close' catchtap='fixClose'>
      <text class='iconfont icon-close'></text>
    </view>    
  </view>
</view>

page {
 height: 100%;
 width: 100%;
}
.page {
 width: 100%;
 height: 100%;
 box-shadow: 0 0 10px rgba(26,26,26,.1);
}
.r-box {
 position: fixed;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
}
.r-box .r-list {
 float: right;
 width: 66%;
 height: 100%;
 background: white;
}
.fixHide {
 transition: all .3s ease;
 transform: translateX(100%);
}
.fixShow {
 transition: all .3s ease;
 transform: translateX(0%);
}
.pageHide {
 transition: all .3s ease;
 transform: translateX(0) scaleY(1);
}
.pageShow {
 transition: all .3s ease;
 transform: translateX(-70%) scaleY(0.9);
}

Page({
  data:{
   isFix:false,//右侧列表是否显示    
  },
  // 右侧列表显示按钮
  pageBtn:function(){
   this.setData({
    isFix:true
   })
  },
  //右侧列表空白点击
  fixHide:function(){
   this.setData({
    isFix: false
   })
  },
  //右侧列表防冒泡，必须有，虽然没内容
  fixStopBu: function () {},
  //右侧列表关闭按钮
  fixClose:function(){
   this.setData({
    isFix:false
   })
  },
})