在微信小程序中自定义从底部弹出框的组件，然后在主页面中使用

component目录下：popup为组件
pages目录下：bottom为要加入组件的页面
(具体效果展示在底部）

1.首先写组件popup
popup.wxml

<view class="half-screen">
  <!--屏幕背景变暗的背景  -->
  <view class="background_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
  <!--弹出框  -->
  <view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}">
    <image class="back" src="../../assets/back.png" bindtap="hideModal"></image>
    <view class="ctTitle">{{title}}</view>
    <view class="thresholdBtn">
      <button id="yes" class="confirm" size="mini" type="primary" bindtap="hideModal">确定</button>
    </view>
  </view>
</view>

popup.wxss

/*使屏幕变暗  */
.background_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.attr_box {
 
  
  height: 230px;
  width: 100%;
  overflow: hidden;
  position: fixed; 
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20px;
}
.attr_box .back {
  margin-top: -30px;
  height: 20px;
  width: 20px;
}
.attr_box .ctTitle{
  margin-top: -30px;
  margin-left: 120px; 
}


.thresholdBtn .confirm{
  margin-bottom: -180px;
  height: 30px;
  width: 80px;
  margin-left: 120px;
 
}

popup.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: '标题'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    //弹窗显示控制 
    showModalStatus: false
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //点击显示底部弹出
    changeRange: function () {
      this.showModal();
    },

    //底部弹出框
    showModal: function () {
      // 背景遮罩层
      var animation = wx.createAnimation({
        duration: 200,
        timingFunction: "linear",
        delay: 0
      })
      //this.animation = animation
      animation.translateY(300).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: true
      })
      setTimeout(function () {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export()
        })
      }.bind(this), 200)
    },
   
    //点击背景面任意一处时，弹出框隐藏
    hideModal: function () {
      //弹出框消失动画
      var animation = wx.createAnimation({
        duration: 200,
        timingFunction: "linear",
        delay: 0
      })
      //this.animation = animation
      animation.translateY(300).step()
      this.setData({
        animationData: animation.export(),
      })
      setTimeout(function () {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export(),
          showModalStatus: false
        })
      }.bind(this), 200)
    },
  }
})

popup.json

{
  "component": true,
  "usingComponents": {}
}

2.然后是主页面
bottom.json

{
  "usingComponents": {
    "popup": "/components/popup/popup"
  }
}

bottom.wxml

<view bindtap="changeRange">请点击</view>
<popup id='popup' title='我是标题'></popup>

bottom.js

Page({
  onReady: function(){
    this.popup= this.selectComponent("#popup");
  },
  changeRange(){
    this.popup.changeRange();
  }
})

效果图