小程序右侧边栏

js

// pages/text/text.js
Page({
  data: {
    side: {//滑动操作
      pageX: 0,
      newpageX: 0,
      open: false,
      newopen: false,//判断侧边栏是否打开-显示
    },
  },
  tap_click: function () {//点击菜单
    this.data.side.open = !this.data.side.open;
    this.setData({ 'side.newopen': this.data.side.open });
  },
  tap_start: function (e) {//touchstart事件
    this.data.side.pageX = this.data.side.newpageX = e.touches[0].pageX;
  },
  tap_move: function (e) {//touchmove事件
    this.data.side.newpageX = e.touches[0].pageX;
  },
  tap_end: function () {//touchend事件
    if (this.data.side.pageX != this.data.side.newpageX) {
      this.data.side.open = this.data.side.pageX > this.data.side.newpageX ? true : false;
      this.setData({ 'side.newopen': this.data.side.open });
    }
  },
})

　　wxml

  
      
  
    
        内容
  

　　wxss

/* pages/text/text.wxss */
.side{
  height: 100%;
  width: 750rpx;
  position: fixed; 
  background: #C1C1C1;

}
.content{
  height: 100%;
  width: 750rpx;
  position: fixed;
  background:#2B9BEB;
  transition: All 0.5s ease;
  -webkit-transition: All 0.5s ease;
    z-index: 2;
}
.state{
  transform: rotate(0deg) scale(1) translate(-70%,0%); 
  -webkit-transform: rotate(0deg) scale(1) translate(-70%,0%); 
}

　　

转载于:https://www.cnblogs.com/amanda-man/p/10171656.html