小程序自定義彈層組件

自己用到的，記錄一下

1、效果圖

2、彈層組件代碼

a、js代碼

// components/dialog/index.js
Component({
  options: {
    multipleSlots: true
  },
  properties: {
    //高度
    height: {
      type: String,
      value: "60vh"
    },
    //標題
    title: {
      type: String,
      value: ""
    },
    //是否顯示標題
    showTitle: {
      type: Boolean,
      value: false
    },
  },
  data: {
    show: false, //是否顯示
  },
  methods: {
    //隱藏顯示
    show: function(e) {

      var animation = wx.createAnimation({
        duration: 200,
        timingFunction: "linear",
        delay: 0
      })
      animation.translateY(600).step()
      this.setData({
        animationData: animation.export(),
        show: true
      })
      setTimeout(function() {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export()
        })
      }.bind(this), 200)


      return;
      this.setData({
        show: true
      });
      this.triggerEvent("showCallback");
    },
    hidden: function(e) {
      var animation = wx.createAnimation({
        duration: 250,
        timingFunction: "linear",
        delay: 0
      })
      animation.translateY(600).step()
      this.setData({
        animationData: animation.export(),
      })
      setTimeout(function() {
        animation.translateY(0).step()
        this.setData({
          // animationData: animation.export(),
          show: false
        })
      }.bind(this), 250)

      return;
      this.setData({
        show: false
      });
      this.triggerEvent("hideCallback");
    }
  }
})

b、css代碼

@import "/style/iconfont.wxss";
@import "/app.wxss";

.dialogBg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  left: 0;
  top: 0;
}

.dialogContent {
  width: 100vw;
  height: 60vh;
  position: fixed;
  bottom: 0;
  background: white;
  z-index: 2;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
}

.dialogTitle {
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
}

.dialogClose {
  position: absolute;
  right: 20rpx;
  color: #999;
  line-height: 70rpx;
  z-index: 2;
}

.dialogSlot {
  width: 100%;
  /* height: 60vh - 70rpx; */
  overflow-y: scroll;
}

c、wxml代碼

<view class="dialogBox" wx:if="{{show}}">
  <view class="dialogBg" catchtouchmove="return" bindtap="hidden"></view>
  <view class="dialogContent" animation="{{animationData}}" style="height:{{height}}">
    <view class="dialogTop">
      <text class="dialogClose sz szguanbi" bindtap="hidden"></text>
      <view wx:if="{{showTitle}}" class="dialogTitle">{{title}}</view>
    </view>
    <view class="dialogSlot" wx:if="{{showTitle}}" style="height:calc({{height}} - 70rpx)">
      <slot name="content"></slot>
    </view>
    <view class="dialogSlot" wx:if="{{!showTitle}}" style="height:{{height}}">
      <slot name="content"></slot>
    </view>
  </view>
</view>

catchtouchmove：給背景加上此值，可方法彈層中滾動造成背景頁面滾動

3、調用方頁面相關代碼

a、頁面json文件引入

{
  "usingComponents": {
    "paramDialog": "/components/dialog/index",//引入彈層組件
    "param": "/components/param/index"//此處把彈層內容也獨立為一個組件
  }
}

b、wxml相關代碼

<!-- 彈層+彈層內容兩個組件 -->
<dialog id="paramDialog" showTitle="{{true}}" title="產品參數" height="60vh">
  <view slot="content">
    <param m="{{m}}" bind:hideParamDialog="afterParam" data="{{data}}" id="paramPage"></param>
  </view>
</dialog>

showTitle：是否顯示標題

title：標題內容

height：彈層高度

param ：傳參跟事件相

 c、js相關代碼

var app = getApp();
var base = require('../../utils/base.js');
var that;
Page({
  data: {   
    paramDialog: undefined,
    paramPage: undefined
  },
  onLoad: function(options) {
    that = this;
    this.setData({
        paramDialog: that.selectComponent("#paramDialog"),
        paramPage: that.selectComponent("#paramPage")
    });
  },
  //關閉參數彈層
  afterParam: function() {
    this.data.paramDialog.hidden();
  },
  //打開參數彈層
  openParamDailog: function() {
    this.data.paramDialog.show();
  }
})

base.js：自己用到的幫助方法庫

4、彈層內容組件相關代碼

a、wxml代碼

//高度減去170rpx為了保持底部確認按鈕，如果不需要可以直接是60vh
 1 <scroll-view scroll-y="true" catchtouchmove='{{true}}' style="height:calc(60vh - 170rpx);">

  <view class="page ">

    //自定義內容

</scroll-view>

<view class="skuBottom clear">
  <view class="skuBottomBox">
    <view bindtap="SelectOk">確定</view>
  </view>
</view>

b、css代碼

@import "/style/iconfont.wxss";
@import "/app.wxss";

scroll-view {
  background: #fff;
}

.page {
  padding: 20rpx;
  padding-top: 0;
}

.skuBottom {
  width: 100%;
  height: 100rpx;
}

.skuBottomBox {
  width: 100%;
  height: 100rpx;
  padding-top: 10rpx;
  position: fixed;
  bottom: 0;
}

.skuBottomBox view {
  background: #ff0812;
  width: calc(100% - 40rpx);
  height: 80rpx;
  border-radius: 5em;
  text-align: center;
  line-height: 80rpx;
  color: white;
  font-weight: bold;
  margin: 0 auto;
}

.radio .szradio-yes {
  color: #ff0812;
}

.radio .szradio-no {
  color: #999;
}

3、js代碼

equire('../../utils/base.js');
var that;
Component({
  properties: {
    m: {
      type: Object,
      value: {}
    }
  },
  data: {},
  methods: {
    SelectOk: function() {
      this.triggerEvent("hideParamDialog");
    }
  }
})

僅此記錄一下，並沒有貼出所有代碼，請見諒！