快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)彈框效果

更新時間：2020年05月26日 11:15:33 作者：saluteNic_LU

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)彈框效果的具體代碼，供大家參考，具體內(nèi)容如下

先上代碼

wxml部分：

<view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'>
 <text>向上彈起</text>
</view>

<view class='top' bindtap='powerDrawer' data-statu="open" data-num='-300'>
 <text>向下彈出</text>
</view>



<!--遮罩部分-->
<view class="drawer_screen" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close"></view> 
<!--彈出層內(nèi)容-->
<!--使用animation屬性指定需要執(zhí)行的動畫-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> 
 <view class='modalBox'>
 <view class='modalQues'>是否退出？</view>
 <view class='modalConf'>是否確定退出</view>
 <view class='hidePick'>
  <text bindtap="powerDrawer" data-statu="close" class='hideModal' >確定</text>
  <text bindtap="powerDrawer" data-statu="close" class='hideModal' >取消</text>
 </view>
 </view>
</view>

wxss部分：

.top {
 margin: 0 auto;
 margin-top: 50rpx;
 background: #1da0ee;
 color: #fff;
 width: 50vw;
 text-align: center
}

.drawer_screen { 
 width: 100%; 
 height: 100%; 
 position: fixed; 
 top: 0; 
 left: 0; 
 z-index: 1000; 
 background: #000; 
 opacity: 0.5; 
 overflow: hidden; 
} 
 
/*content*/
.drawer_box { 
 width:600rpx;
 height:300rpx;
 overflow:hidden;
 position:fixed;
 top:50%;
 left:50%;
 z-index:1001;
 background:#FAFAFA;
 margin-top:-150rpx;
 border-radius:3px;
 margin-left:-300rpx;
} 

.modalBox {
 padding: 60rpx;
 font-size: 30rpx;
}


.modalConf {
 font-size: 24rpx;
 color: #999;
 margin-top: 20rpx; 
}

.hidePick {
 text-align: right;
 margin-top: 50rpx;
}

.hideModal {
 color: #1da0ee;
 margin-left: 130rpx;
}

js部分：

Page({
 data: {

 },
 // 自定義彈框
 powerDrawer: function (e) {
 console.log(e) //打印出當(dāng)前對象
 var currentStatu = e.currentTarget.dataset.statu; //獲取statu屬性值
 var currentNum = e.currentTarget.dataset.num;//獲取num屬性值
 currentNum = parseInt(currentNum , 10) //注意，這一步是將字符串轉(zhuǎn)換為數(shù)字
 this.util(currentStatu,currentNum) //將參數(shù)引入util方法
 },
 util: function (currentStatu,currentNum) {
 /* 動畫部分 */
 // 第1步：創(chuàng)建動畫實例 
 var animation = wx.createAnimation({
  duration: 200, //動畫時長 
  timingFunction: "linear", //線性 
  delay: 0 //0則不延遲 
 });

 // 第2步：這個動畫實例賦給當(dāng)前的動畫實例 
 this.animation = animation;
 console.log(currentNum)
 // 第3步：執(zhí)行第一組動畫 
 animation.opacity(0).translateY(currentNum).step();

 // 第4步：導(dǎo)出動畫對象賦給數(shù)據(jù)對象儲存 
 this.setData({
  animationData: animation.export()
 })

 // 第5步：設(shè)置定時器到指定時候后，執(zhí)行第二組動畫 
 setTimeout(function () {
  // 執(zhí)行第二組動畫 
  animation.opacity(1).translateY(0).step();
  // 給數(shù)據(jù)對象儲存的第一組動畫，更替為執(zhí)行完第二組動畫的動畫對象 
  this.setData({
  animationData: animation
  })

  //關(guān)閉 
  if (currentStatu == "close") {
  this.setData(
   {
   showModalStatus: false
   }
  );
  }
 }.bind(this), 200)

 // 顯示 
 if (currentStatu == "open") {
  this.setData(
  {
   showModalStatus: true
  }
  );
 }
 },
})

這只是很簡單的一個彈框，類似的左右彈出只需要將translateY改為translateX就行了。但是這段代碼有一個問題就是當(dāng)你點(diǎn)擊關(guān)閉的時候，currentNum是不存在的，同時關(guān)閉彈框時currentNum我們不可以賦值，所以需要利用小程序的緩存APi來完善這個動效。

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: