网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序之自定義抽屜菜單（從下拉出）實例

發布時間：2017-12-05 09:06 所屬欄目：小程序開發教程

微信提供了動畫api，就是下面這個相關鏈接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject通過使用這個創建動畫的api，可以做出很 ...

 
 
 

微信提供了動畫api，就是下面這個

 

相關鏈接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject

 

通過使用這個創建動畫的api，可以做出很多特效出來

下面介紹一個抽屜菜單的案例

 

實現代碼：

wxml：

 

[html] view plain copy
 
  1. <!--button-->  
  2. <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>  
  3. <!--mask-->  
  4. <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>  
  5. <!--content-->  
  6. <!--使用animation屬性指定需要執行的動畫-->  
  7. <view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">  
  8.   <!--drawer content-->  
  9.   <view class="drawer_content">  
  10.     <view class="drawer_title line">菜單1</view>  
  11.     <view class="drawer_title line">菜單2</view>  
  12.     <view class="drawer_title line">菜單3</view>  
  13.     <view class="drawer_title line">菜單4</view>  
  14.     <view class="drawer_title">菜單5</view>  
  15.   </view>  
  16. </view>  

 

 

 

wxss：

[css] view plain copy
 
  1. /*button*/  
  2. .btn {  
  3.   width: 80%;  
  4.   padding: 20rpx 0;  
  5.   border-radius: 10rpx;  
  6.   text-align: center;  
  7.   margin: 40rpx 10%;  
  8.   background: #0C1939;  
  9.   color: #fff;  
  10. }  
  11. /*mask*/  
  12. .drawer_screen {  
  13.   width: 100%;  
  14.   height: 100%;  
  15.   position: fixed;  
  16.   top: 0;  
  17.   left: 0;  
  18.   z-index: 1000;  
  19.   background: #000;  
  20.   opacity: 0.2;  
  21.   overflow: hidden;  
  22. }  
  23. /*content*/  
  24. .drawer_attr_box {  
  25.   width: 100%;  
  26.   overflow: hidden;  
  27.   position: fixed;  
  28.   bottom: 0;  
  29.   left: 0;  
  30.   z-index: 1001;  
  31.   background: #fff;  
  32. }  
  33. .drawer_content {  
  34.   padding: 20rpx 40rpx;  
  35.   height: 470rpx;  
  36.   overflow-y: scroll;  
  37. }  
  38. .drawer_title{  
  39.   padding:20rpx;  
  40.   font:42rpx "microsoft yahei";  
  41.   text-align: center;  
  42. }  
  43. .line{  
  44.   border-bottom: 1px solid #f8f8f8;  
  45. }  

 

js：

[javascript] view plain copy
 
  1. Page({  
  2.   data: {  
  3.     showModalStatus: false  
  4.   },  
  5.   powerDrawer: function (e) {  
  6.     var currentStatu = e.currentTarget.dataset.statu;  
  7.     this.util(currentStatu)  
  8.   },  
  9.   util: function(currentStatu){  
  10.     /* 動畫部分 */  
  11.     // 第1步：創建動畫實例   
  12.     var animation = wx.createAnimation({  
  13.       duration: 200,  //動畫時長  
  14.       timingFunction: "linear", //線性  
  15.       delay: 0  //0則不延遲  
  16.     });  
  17.       
  18.     // 第2步：這個動畫實例賦給當前的動畫實例  
  19.     this.animation = animation;  
  20.   
  21.     // 第3步：執行第一組動畫：Y軸偏移240px后(盒子高度是240px)，停  
  22.     animation.translateY(240).step();  
  23.   
  24.     // 第4步：導出動畫對象賦給數據對象儲存  
  25.     this.setData({  
  26.       animationData: animation.export()  
  27.     })  
  28.       
  29.     // 第5步：設置定時器到指定時候后，執行第二組動畫  
  30.     setTimeout(function () {  
  31.       // 執行第二組動畫：Y軸不偏移，停  
  32.       animation.translateY(0).step()  
  33.       // 給數據對象儲存的第一組動畫，更替為執行完第二組動畫的動畫對象  
  34.       this.setData({  
  35.         animationData: animation  
  36.       })  
  37.         
  38.       //關閉抽屜  
  39.       if (currentStatu == "close") {  
  40.         this.setData(  
  41.           {  
  42.             showModalStatus: false  
  43.           }  
  44.         );  
  45.       }  
  46.     }.bind(this), 200)  
  47.     
  48.     // 顯示抽屜  
  49.     if (currentStatu == "open") {  
  50.       this.setData(  
  51.         {  
  52.           showModalStatus: true  
  53.         }  
  54.       );  
  55.     }  
  56.   }  
  57. })  


效果：



易優小程序（企業版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.xiuhaier.com/wxmini/doc/course/18038.html 復制鏈接 如需定制請聯系易優客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×