小程序仿QQ侧滑例子

Posted 2020-08-28 洋洋知道

缩放：wxml

<!--page/one/index.wxml-->
<view class="page">
    <view class="page-bottom">
        <view class="page-content">
            <view  class="wc">
                <navigator url="../one/index" hover-class="navigator-hover">第一个菜单</navigator>
            </view>
            <view  class="wc">
                <navigator url="../two/index" hover-class="navigator-hover">第二个菜单（缩放）</navigator>
            </view>
            <view  class="wc">
                <navigator url="../three/index" hover-class="navigator-hover">第三个菜单（拖动）</navigator>
            </view>
            <view  class="wc">
                <navigator url="../four/index" hover-class="navigator-hover">第四个菜单</navigator>
            </view>
        </view>
    </view>
    <view class="page-top {{open ? ‘c-state2‘ : ‘‘}}">
        <image bindtap="tap_ch" src="../../images/btn.png"></image>
        <view class="text">第二个菜单（缩放）</view>
    </view>
</view>

　　js

Page({
  data:{
    open : false//这个数据是用来上面一层页面是覆盖在屏幕上还是在旁边
  },
  tap_ch: function(e){//点击的时候设置这个属性的值
    if(this.data.open){
      this.setData({
        open : false//之前是打开的话现在设置为关闭
      });
    }else{
      this.setData({
        open : true
      });
    }
  }
})

　　wxss

page,.page {
  height: 100%;
  font-family: ‘PingFang SC‘, ‘Helvetica Neue‘, Helvetica, ‘Droid Sans Fallback‘, ‘Microsoft Yahei‘, sans-serif;
}
.page-bottom{
  height: 100%;
  width: 750rpx;
  position: fixed; 
  background-color: rgb(0, 68, 97);
  z-index: 0;
}
.wc{
  color: white;
  padding: 30rpx 0 30rpx 40rpx;
}
.page-content{
  padding-top: 300rpx;
}
.page-top{
  height: 100%;
  position: fixed;
  width: 750rpx;
  background-color: rgb(57, 125, 230);
  z-index: 0;
  transition: All 0.4s ease; 
  -webkit-transition: All 0.4s ease;
}
.page-top image{
  position: absolute;
  width: 68rpx;
  height: 38rpx;
  left: 20rpx;
  top: 20rpx;
}
.c-state1{//这个是平滑的
  transform: rotate(0deg) scale(1) translate(75%,0%); 
  -webkit-transform: rotate(0deg) scale(1) translate(75%,0%); 
}
.c-state2{//这个是带缩放的
  transform: rotate(0deg) scale(.8) translate(75%,0%); 
  -webkit-transform: rotate(0deg) scale(.8) translate(75%,0%); 
}
.text{
  margin: auto;
  margin-top: 20rpx;
  margin-left: 130rpx;
  vertical-align: middle;
  color: white;
}

　　平滑的wxml

<view class="page">
    <view class="page-bottom">
        <view class="page-content">
            <view  class="wc">
                <navigator url="../one/index" hover-class="navigator-hover">第一个菜单</navigator>
            </view>
            <view  class="wc">
                <navigator url="../two/index" hover-class="navigator-hover">第二个菜单（缩放）</navigator>
            </view>
            <view  class="wc">
                <navigator url="../three/index" hover-class="navigator-hover">第三个菜单（拖动）</navigator>
            </view>
            <view  class="wc">
                <navigator url="../four/index" hover-class="navigator-hover">第四个菜单</navigator>
            </view>
        </view>
    </view>
    <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ‘c-state1‘ : ‘‘}}">
        <image bindtap="tap_ch" src="../../images/btn.png"></image>
        <view class="text">第三个菜单（拖动）</view>
    </view>
</view>

　　js

// page/one/index.js
Page({
  data:{
    open : false,
    mark: 0,
    newmark: 0,
    istoright:true
  },
  tap_ch: function(e){
    if(this.data.open){
      this.setData({
        open : false
      });
    }else{
      this.setData({
        open : true
      });
    }
  },
  tap_start:function(e){
    // touchstart事件
    this.data.mark = this.data.newmark = e.touches[0].pageX;
  },
  tap_drag: function(e){
    // touchmove事件
 
    /*
     * 手指从左向右移动
     * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标
     */
    this.data.newmark = e.touches[0].pageX;
    if(this.data.mark < this.data.newmark){
      this.istoright = true;
    }
    /*
     * 手指从右向左移动
     * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标
     */
    if(this.data.mark > this.data.newmark){
      this.istoright = false;
      
    }
    this.data.mark = this.data.newmark;

  },
  tap_end: function(e){
    // touchend事件
    this.data.mark = 0;
    this.data.newmark = 0;
    if(this.istoright){
      this.setData({
        open : true
      });
    }else{
      this.setData({
        open : false
      });
    }
  }
})