小程序右侧边栏

最新推荐文章于 2021-01-14 10:47:19 发布

weixin_34211761

最新推荐文章于 2021-01-14 10:47:19 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/amanda-man/p/10171656.html

// 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

<view class="page">

  <view bindtouchmove="tap_move" bindtouchend="tap_end" bindtouchstart="tap_start" class="content {{side.newopen?'state':''}}">
      <image bindtap="tap_click" src="../../static/nav_icon_miaoSha.png" style='width:2rem;height:2rem'></image>
  </view>
    <view class="side"><!--侧滑菜单-->
        <text>内容</text>
  </view>
</view>

　　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