小程序自定义弹层组件

自己用到的，记录一下

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 {
   100vw;
  height: 100vh;
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  left: 0;
  top: 0;
}

.dialogContent {
   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 {
   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 {
   100%;
  height: 100rpx;
}

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

.skuBottomBox view {
  background: #ff0812;
   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");
    }
  }
})

仅此记录一下，并没有贴出所有代码，请见谅！