微信小程序?qū)崿F(xiàn)彈框效果
本文實(shí)例為大家分享了微信小程序?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í)行的動(dòng)畫--> <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) { /* 動(dòng)畫部分 */ // 第1步:創(chuàng)建動(dòng)畫實(shí)例 var animation = wx.createAnimation({ duration: 200, //動(dòng)畫時(shí)長 timingFunction: "linear", //線性 delay: 0 //0則不延遲 }); // 第2步:這個(gè)動(dòng)畫實(shí)例賦給當(dāng)前的動(dòng)畫實(shí)例 this.animation = animation; console.log(currentNum) // 第3步:執(zhí)行第一組動(dòng)畫 animation.opacity(0).translateY(currentNum).step(); // 第4步:導(dǎo)出動(dòng)畫對象賦給數(shù)據(jù)對象儲(chǔ)存 this.setData({ animationData: animation.export() }) // 第5步:設(shè)置定時(shí)器到指定時(shí)候后,執(zhí)行第二組動(dòng)畫 setTimeout(function () { // 執(zhí)行第二組動(dòng)畫 animation.opacity(1).translateY(0).step(); // 給數(shù)據(jù)對象儲(chǔ)存的第一組動(dòng)畫,更替為執(zhí)行完第二組動(dòng)畫的動(dòng)畫對象 this.setData({ animationData: animation }) //關(guān)閉 if (currentStatu == "close") { this.setData( { showModalStatus: false } ); } }.bind(this), 200) // 顯示 if (currentStatu == "open") { this.setData( { showModalStatus: true } ); } }, })
這只是很簡單的一個(gè)彈框,類似的左右彈出只需要將translateY改為translateX就行了。 但是這段代碼有一個(gè)問題就是當(dāng)你點(diǎn)擊關(guān)閉的時(shí)候,currentNum是不存在的,同時(shí)關(guān)閉彈框時(shí)currentNum我們不可以賦值 , 所以需要利用小程序的緩存APi來完善這個(gè)動(dòng)效。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript添加監(jiān)聽與刪除監(jiān)聽用法詳解
這篇文章主要介紹了Javascript添加監(jiān)聽與刪除監(jiān)聽用法,較為詳細(xì)的分析了javascript原理與用法,并補(bǔ)充說明了事件監(jiān)聽的兼容性問題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12javascript generator生成器函數(shù)與asnyc/await語法糖
本文主要介紹了javascript generator生成器函數(shù)與asnyc/await語法糖,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03javascript-簡單的日歷實(shí)現(xiàn)及Date對象語法介紹(附圖)
主要是對Date對象的使用,首先回憶一下Date對象的參數(shù)及方法,代碼如下,感興趣的朋友可以參考下哈2013-05-05IE之動(dòng)態(tài)添加DOM節(jié)點(diǎn)觸發(fā)window.resize事件
因?yàn)轫撁婧芏郩I是絕對定位的,所以當(dāng)窗口大小改變的時(shí)候會(huì)使原先的布局混亂,只好在每次window.resize的時(shí)候重新布局...2010-07-07ExtJs的Ext.Ajax.request實(shí)現(xiàn)waitMsg等待提示效果
這篇文章主要介紹了ExtJs的Ext.Ajax.request實(shí)現(xiàn)waitMsg等待提示效果,需要的朋友可以參考下2017-06-06JS頁面動(dòng)態(tài)繪圖工具SVG,Canvas,VML介簡介
這篇文章主要介紹了JS頁面動(dòng)態(tài)繪圖工具SVG,Canvas,VML介簡介,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10