小程式選單欄型彈出框
阿新 • • 發佈:2019-01-28
emmmmmmm,這是我的第一個發的部落格。希望對大家有點幫助。
這是用的小程式自帶的動畫事件來是我們的彈出框顯示和
var animation; Page({ /** * 頁面的初始資料 */ data: { animationData: {} }, tanchu:function(){ animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease', }) this.animation = animation animation.translate(0,-153).step(); this.setData({ animationData: animation.export() }) }, hideModal:function(){ animation.translate(0, 0).step(); this.setData({ animationData: animation.export() }) }, })
這部分是頁面的,也沒什麼好說的了。
<!--a/a.wxml-->
<button bindtap='tanchu'>點選</button>
<view class='kuai' animation="{{animationData}}">
<view class='les'>操作1</view>
<view class='les'>操作2</view>
<view class='les' bindtap='hideModal'>取消</view>
</view>
這是css其實沒什麼要寫的。只要根據自己需求寫樣式,一開始先使用偏移將選單欄移除試圖區域。
.kuai{
width: 100%;
height: 300rpx;
background-color: #888888;
margin-bottom: -153px;
position: fixed;
bottom: 0;
}
.les{
color: white;
text-align: center;
height: 100rpx;
width: 100%;
line-height: 100rpx;
border-bottom:1rpx solid black;
}
樣式醜是醜了點,畢竟只是練下手QAQ。
支援一下嘻嘻