快捷導(dǎo)航

微信小程序自定義底部彈出框功能

更新時(shí)間：2020年11月18日 16:02:55 作者：星星之火M

這篇文章主要為大家詳細(xì)介紹了微信小程序自定義底部彈出框功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序自定義底部彈出框的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)這么一個(gè)功能，點(diǎn)擊選項(xiàng)進(jìn)行選擇，效果是從底部彈出選項(xiàng)框（帶滑出動(dòng)畫(huà)），選擇了某項(xiàng)或者點(diǎn)擊其他地方，隱藏（帶滑出動(dòng)畫(huà)）。效果圖如下：

可適用于任何場(chǎng)景，如普通選項(xiàng)（如圖）或者類似商城小程序選擇商品屬性的彈出框。只需要把內(nèi)容替換自己需要的即可。

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中，藍(lán)色框框起來(lái)的，可按需替換。

2. wxss代碼

.arrow{
 display:inline-block;
 border:6px solid transparent;
 border-top-color:#000;
 margin-left:8px;
 position:relative;
 top:6rpx;
}
/* ---------------------------- */
/*模態(tài)框*/
.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,0,0.3);}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
/*動(dòng)畫(huà)前初始位置*/
.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;
}

如果項(xiàng)目中，多個(gè)頁(yè)面使用了同樣效果彈出框，如下的代碼可以放到公共樣式文件app.wxss中。

3. js代碼

Page({
 
 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 optionList:['所有','選項(xiàng)1','選項(xiàng)2'],
 value:'所有',
 
 hideFlag: true,//true-隱藏 false-顯示
 animationData: {},//
 },
 // 點(diǎn)擊選項(xiàng)
 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
 })
 // 創(chuàng)建動(dòng)畫(huà)實(shí)例
 var animation = wx.createAnimation({
  duration: 400,//動(dòng)畫(huà)的持續(xù)時(shí)間
  timingFunction: 'ease',//動(dòng)畫(huà)的效果 默認(rèn)值是linear->勻速，ease->動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢
 })
 this.animation = animation; //將animation變量賦值給當(dāng)前動(dòng)畫(huà)
 var time1 = setTimeout(function () {
  that.slideIn();//調(diào)用動(dòng)畫(huà)--滑入
  clearTimeout(time1);
  time1 = null;
 }, 100)
 },
 
 // 隱藏遮罩層
 hideModal: function () {
 var that = this;
 var animation = wx.createAnimation({
  duration: 400,//動(dòng)畫(huà)的持續(xù)時(shí)間 默認(rèn)400ms
  timingFunction: 'ease',//動(dòng)畫(huà)的效果 默認(rèn)值是linear
 })
 this.animation = animation
 that.slideDown();//調(diào)用動(dòng)畫(huà)--滑出
 var time1 = setTimeout(function () {
  that.setData({
  hideFlag: true
  })
  clearTimeout(time1);
  time1 = null;
 }, 220)//先執(zhí)行下滑動(dòng)畫(huà)，再隱藏模塊
 
 },
 //動(dòng)畫(huà) -- 滑入
 slideIn: function () {
 this.animation.translateY(0).step() // 在y軸偏移，然后用step()完成一個(gè)動(dòng)畫(huà)
 this.setData({
  //動(dòng)畫(huà)實(shí)例的export方法導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)傳遞給組件的animation屬性
  animationData: this.animation.export()
 })
 },
 //動(dòng)畫(huà) -- 滑出
 slideDown: function () {
 this.animation.translateY(300).step()
 this.setData({
  animationData: this.animation.export(),
 })
 },
 
})

如上，用“// ------------------------------------------modal”隔開(kāi)的以下的代碼可不需要?jiǎng)印?/p>

如果一個(gè)頁(yè)面中使用了兩個(gè)同樣效果的彈出框，只需要稍微修改一下就行了，這里就不貼出來(lái)。

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: