JS中微信小程序自定義底部彈出框
更新時(shí)間：2016年12月22日 17:19:09 作者：Mr_Sparta
本文通過實(shí)例代碼給大家介紹了js開發(fā)中微信小程序自定義底部彈出框效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
實(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中微信小程序自定義底部彈出框，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要幫助大家深入理解js瀑布流布局，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
總結(jié)兩個(gè)Javascript的哈稀對(duì)象的一些編程技巧
總結(jié)兩個(gè)Javascript的哈稀對(duì)象的一些編程技巧...2007-04-04
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)扁平化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
判斷語句這個(gè)我們不陌生,就是判斷是否滿足指定的條件,如果滿足則執(zhí)行一定的代碼,否則跳過,下面這篇文章主要給大家介紹了關(guān)于JavaScript中判斷的優(yōu)雅寫法,需要的朋友可以參考下2021-10-10
replace() 方法用于將字符串用一些字符替換另一些字符，如果用正則表達(dá)式替換時(shí)， regexp 具有全局標(biāo)志 g，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
uniapp打開地圖直接獲取位置的實(shí)現(xiàn)代碼
這篇文章主要介紹了uniapp打開地圖直接獲取位置的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
這篇文章主要介紹了淺談Javascript線程及定時(shí)機(jī)制的相關(guān)資料,需要的朋友可以參考下2015-07-07
今天小編就為大家分享一篇解決Layui 表單提交數(shù)據(jù)為空的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對(duì)象
使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對(duì)象，學(xué)習(xí)js的朋友可以參考下。2011-09-09
layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法
今天小編就為大家分享一篇layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09