微信小程式自定義底部彈出框功能
阿新 • • 發佈:2020-11-19
本文例項為大家分享了微信小程式自定義底部彈出框的具體程式碼,供大家參考,具體內容如下
實現這麼一個功能,點選選項進行選擇,效果是從底部彈出選項框(帶滑出動畫),選擇了某項或者點選其他地方,隱藏(帶滑出動畫)。效果圖如下:
可適用於任何場景,如普通選項(如圖)或者類似商城小程式選擇商品屬性的彈出框。只需要把內容替換自己需要的即可。
1. wxml程式碼
<view class="wrap"> <view bindtap="showModal"> <text>{{value}}</text> <icon class="arrow"></icon> </view> <!-- modal --> <view class="modal modal-bottom-dialog" hidden="{{hideFlag}}"> <view class="modal-cancel" bindtap="hideModal"></view> <view class="bottom-dialog-body bottom-positon" animation="{{animationData}}"> <!-- --> <view class='Mselect'> <view wx:for="{{optionList}}" wx:key="unique" data-value='{{item}}' bindtap='getOption'> {{item}} </view> </view> <view></view> <view class='Mcancel' bindtap='mCancel'> <text>取消</text> </view> </view> </view> </view>
modal中,藍色框框起來的,可按需替換。
2. wxss程式碼
.arrow{ display:inline-block; border:6px solid transparent; border-top-color:#000; margin-left:8px; position:relative; top:6rpx; } /* ---------------------------- */ /*模態框*/ .modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;} .modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0.3);} .bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;} /*動畫前初始位置*/ .bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);} /* 底部彈出框 */ .bottom-positon{ text-align: center; } .Mselect{ margin-bottom: 20rpx; } .Mselect view{ padding: 26rpx 0; background: #fff; } .Mselect view:not(:last-of-type){ border-bottom: 1px solid #dfdede; } .Mcancel{ background: #fff; padding: 26rpx 0; }
如果專案中,多個頁面使用了同樣效果彈出框,如下的程式碼可以放到公共樣式檔案app.wxss中。
3. js程式碼
Page({ /** * 頁面的初始資料 */ data: { optionList:['所有','選項1','選項2'],value:'所有',hideFlag: true,//true-隱藏 false-顯示 animationData: {},// },// 點選選項 getOption:function(e){ var that = this; that.setData({ value:e.currentTarget.dataset.value,hideFlag: true }) },//取消 mCancel: function () { var that = this; that.hideModal(); },// ----------------------------------------------------------------------modal // 顯示遮罩層 showModal: function () { var that = this; that.setData({ hideFlag: false }) // 建立動畫例項 var animation = wx.createAnimation({ duration: 400,//動畫的持續時間 timingFunction: 'ease',//動畫的效果 預設值是linear->勻速,ease->動畫以低速開始,然後加快,在結束前變慢 }) this.animation = animation; //將animation變數賦值給當前動畫 var time1 = setTimeout(function () { that.slideIn();//呼叫動畫--滑入 clearTimeout(time1); time1 = null; },100) },// 隱藏遮罩層 hideModal: function () { var that = this; var animation = wx.createAnimation({ duration: 400,//動畫的持續時間 預設400ms timingFunction: 'ease',//動畫的效果 預設值是linear }) this.animation = animation that.slideDown();//呼叫動畫--滑出 var time1 = setTimeout(function () { that.setData({ hideFlag: true }) clearTimeout(time1); time1 = null; },220)//先執行下滑動畫,再隱藏模組 },//動畫 -- 滑入 slideIn: function () { this.animation.translateY(0).step() // 在y軸偏移,然後用step()完成一個動畫 this.setData({ //動畫例項的export方法匯出動畫資料傳遞給元件的animation屬性 animationData: this.animation.export() }) },//動畫 -- 滑出 slideDown: function () { this.animation.translateY(300).step() this.setData({ animationData: this.animation.export(),}) },})
如上,用“// ------------------------------------------modal”隔開的以下的程式碼可不需要動。
如果一個頁面中使用了兩個同樣效果的彈出框,只需要稍微修改一下就行了,這裡就不貼出來。
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。