微信小程序自定義底部彈出框
更新時間：2020年11月16日 10:07:44 作者：Mr_Sparta
這篇文章主要為大家詳細介紹了微信小程序自定義底部彈出框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序底部彈出框展示的具體代碼，供大家參考，具體內容如下
效果圖：
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動畫樣式
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)
}
為大家推薦現在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在JavaScript中實現文件下載的功能可以通過多種方式實現,這篇文章主要給大家介紹了關于JavaScript實現文件下載的14種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了JavaScript 類的封裝操作,結合實例形式分析了JavaScript 類的封裝基本原理、操作技巧與相關注意事項,需要的朋友可以參考下2020-05-05
Webpack devServer中的 proxy 實現跨域的解決
這篇文章主要介紹了Webpack devServer中的 proxy 實現跨域的解決，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
js中 某個函數的內部函數在該函數執(zhí)行結束后仍然可以訪問這個函數中定義的變量，這稱為閉包(Closure)2008-11-11
這篇文章主要介紹了微信小程序-頁面間值傳遞的2種方法，每種方法通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
本來是很簡單的一個功能，可是一開始弄的時候，還有IE能實現，FF總是不能實現，在網上看了半天，也沒弄出個所以然，所以在同事的幫忙下，總算弄出來了，瀏覽器的兼容性考的還是細節(jié)上面的東西，所有關于細節(jié)的，我會用注釋標出來的。2015-05-05
這篇文章主要介紹了JavaScript刪除數組元素的方法,實例分析了javascript中delete函數的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
本文主要分享了js模糊查詢的實現代碼，沒有接觸到后臺數據的知識，只是查詢當前表格中每一行所包含的關鍵字。具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細介紹了微信小程序實現簡單聊天室，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細介紹了如何實現js頁面切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07