JS中微信小程序自定義底部彈出框
實(shí)現(xiàn)微信小程序底部彈出框效果,代碼分為html,css和js兩部分,具體代碼詳情大家參考下本文。
html
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"></view>
CSS
.commodity_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff; } .commodity_attr_box { width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; padding-top: 20rpx; }
JS動(dòng)畫樣式
showModal: function () { // 顯示遮罩層 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), showModalStatus: true }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export() }) }.bind(this), 200) }, hideModal: function () { // 隱藏遮罩層 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalStatus: false }) }.bind(this), 200) }
以上所述是小編給大家介紹的JS中微信小程序自定義底部彈出框,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
總結(jié)兩個(gè)Javascript的哈稀對象的一些編程技巧
總結(jié)兩個(gè)Javascript的哈稀對象的一些編程技巧...2007-04-04uniapp打開地圖直接獲取位置的實(shí)現(xiàn)代碼
這篇文章主要介紹了uniapp打開地圖直接獲取位置的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對象
使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對象,學(xué)習(xí)js的朋友可以參考下。2011-09-09layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法
今天小編就為大家分享一篇layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09