小程式仿QQ側滑例子

標籤：web   png   text   data   sof   rgb   height   content   soft   

縮放：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.jsPage({  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      });    }  }})

　　

小程式仿QQ側滑例子