推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 848|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(27) : 微信小程序之自定義抽屜菜單(從下拉出)實例

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:52:22 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

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



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


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

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


實現代碼:

wxml:


[html] view plain copy


  • <!--button-->  
  • <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>  
  • <!--mask-->  
  • <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>  
  • <!--content-->  
  • <!--使用animation屬性指定需要執行的動畫-->  
  • <view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">  
  •   <!--drawer content-->  
  •   <view class="drawer_content">  
  •     <view class="drawer_title line">菜單1</view>  
  •     <view class="drawer_title line">菜單2</view>  
  •     <view class="drawer_title line">菜單3</view>  
  •     <view class="drawer_title line">菜單4</view>  
  •     <view class="drawer_title">菜單5</view>  
  •   </view>  
  • </view>  




wxss:

[css] view plain copy


  • /*button*/  
  • .btn {  
  •   width: 80%;  
  •   padding: 20rpx 0;  
  •   border-radius: 10rpx;  
  •   text-align: center;  
  •   margin: 40rpx 10%;  
  •   background: #0C1939;  
  •   color: #fff;  
  • }  
  • /*mask*/  
  • .drawer_screen {  
  •   width: 100%;  
  •   height: 100%;  
  •   position: fixed;  
  •   top: 0;  
  •   left: 0;  
  •   z-index: 1000;  
  •   background: #000;  
  •   opacity: 0.2;  
  •   overflow: hidden;  
  • }  
  • /*content*/  
  • .drawer_attr_box {  
  •   width: 100%;  
  •   overflow: hidden;  
  •   position: fixed;  
  •   bottom: 0;  
  •   left: 0;  
  •   z-index: 1001;  
  •   background: #fff;  
  • }  
  • .drawer_content {  
  •   padding: 20rpx 40rpx;  
  •   height: 470rpx;  
  •   overflow-y: scroll;  
  • }  
  • .drawer_title{  
  •   padding:20rpx;  
  •   font:42rpx "microsoft yahei";  
  •   text-align: center;  
  • }  
  • .line{  
  •   border-bottom: 1px solid #f8f8f8;  
  • }  


js:

[javascript] view plain copy


  • Page({  
  •   data: {  
  •     showModalStatus: false  
  •   },  
  •   powerDrawer: function (e) {  
  •     var currentStatu = e.currentTarget.dataset.statu;  
  •     this.util(currentStatu)  
  •   },  
  •   util: function(currentStatu){  
  •     /* 動畫部分 */  
  •     // 第1步:創建動畫實例   
  •     var animation = wx.createAnimation({  
  •       duration: 200,  //動畫時長  
  •       timingFunction: "linear", //線性  
  •       delay: 0  //0則不延遲  
  •     });  
  •       
  •     // 第2步:這個動畫實例賦給當前的動畫實例  
  •     this.animation = animation;  
  •   
  •     // 第3步:執行第一組動畫:Y軸偏移240px后(盒子高度是240px),停  
  •     animation.translateY(240).step();  
  •   
  •     // 第4步:導出動畫對象賦給數據對象儲存  
  •     this.setData({  
  •       animationData: animation.export()  
  •     })  
  •       
  •     // 第5步:設置定時器到指定時候后,執行第二組動畫  
  •     setTimeout(function () {  
  •       // 執行第二組動畫:Y軸不偏移,停  
  •       animation.translateY(0).step()  
  •       // 給數據對象儲存的第一組動畫,更替為執行完第二組動畫的動畫對象  
  •       this.setData({  
  •         animationData: animation  
  •       })  
  •         
  •       //關閉抽屜  
  •       if (currentStatu == "close") {  
  •         this.setData(  
  •           {  
  •             showModalStatus: false  
  •           }  
  •         );  
  •       }  
  •     }.bind(this), 200)  
  •    
  •     // 顯示抽屜  
  •     if (currentStatu == "open") {  
  •       this.setData(  
  •         {  
  •           showModalStatus: true  
  •         }  
  •       );  
  •     }  
  •   }  
  • })  


效果:


本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 188比分直播app直 九五至尊棋牌厅app 福建十一选五app下载 北京麻将app有哪些 内蒙11选5前按顺序出号 韩国28开奖的网站 上海快3三同号最大遗漏 辽宁11选5复式玩法 竞彩比分4串1 36选7中奖规则及奖金 江西十一选五技巧 北京汽车pk10