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