小程序的底部弹窗（半屏弹窗）

我这里主要是使用小程序的原生组件WeUI来完成的，需要引入WeUI组件库。这里就不教如何引入库，需要导入WeUI组件库的请看 小程序开发：轻松导入WeUI包
主要讲解如何使用Half Screen Dialog标签。
首先就是通过json文件引入到你需要使用组件的页面。

{
  "usingComponents": {
    "mp-half-screen-dialog":"/weui-miniprogram/half-screen-dialog/half-screen-dialog"
  }
}

这里的 mp-half-screen-dialog 为标签名，可以自己定义标签名，/weui-miniprogram/half-screen-dialog/half-screen-dialog 为引入包的相对路径，引入WeUI组件库包的half-screen-dialog的文件。
接下来就是如何使用，首先就是在wxml文件中直接使用标签

<mp-half-screen-dialog></mp-half-screen-dialog>

他的属性主要是以下几个：
extClass：组件类名
title：组件主标题标题
desc：辅助操作描述内容，可以简单的显示一些文字
show：是否开启弹窗（默认为true）ps:主要靠此属性来完成弹出效果
buttons：辅助操作按钮列表
bindbuttontap：点击辅助操作按钮时触发
bindclose：组件关闭时候触发
以及slot属性。

wxml:

<mp-half-screen-dialog
  etClass="test"
  title="test"
  desc="hello,this is test."
  show="{{show}}"
  buttons="{{buttons}}"
  bindbuttontap="bindButtonTap"
  bindclose="bindClose"
 ></mp-half-screen-dialog>
<button type="primary" bindtap="btn">test</button>

js:

data: {
  show:false,
  buttons:[
    {
      type:'default',
      className:'test1',
      text:'测试1',
      value:0
    },{
      type:'primary',
      className:'test2',
      text:'测试2',
      value:1
    }
  ]
},
btn:function(){
  this.setData({show:true})
},
bindClose:function(){
  console.log("bindClose")
},
bindButtonTap:function(e){
  console.log(e.detail)
  this.setData({show:false})
}

大致效果如下图：

slot

这使得单独拿出来讲的，开发过程中slot使用的会比较多，属于自定义标题、内容和按钮。
使用方法如下：

<mp-half-screen-dialog
  etClass="test"
  show="{{show}}"
  bindbuttontap="bindButtonTap"
  bindclose="bindClose"
>
  <view slot="title">
    <text>这是标题</text>
  </view>
  <view slot="desc">
    <view style="font-size: 50rpx;">这是内容</view>
    <text style="color: red;">内容可以像页面一样设计</text>    
  </view>
  <view slot="footer">
    <button type="primary">这是按钮</button>
  </view>
</mp-half-screen-dialog>
<button type="primary" bindtap="btn">test</button>

ps：一旦使用自定义的东西后，不可以使用 title、desc、buttons属性，否则slot属性将无法生效。
以下为效果图：

设计：秋
编辑：千歌