微信小程序底部弹窗（半屏弹窗）---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）主要靠此属性来完成弹出
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属性具体看 小程序开发：小程序的底部弹窗（半屏弹窗）