vi-popup v0.0.2

vi-popup

使用

npm i vi-popup 使用微信开发者工具构建NPM并使用NPM模块

{
  "usingComponents": {
    "vi-popup": "vi-popup"
  }
}

底部出现

<vi-popup ishide="{{popupHide_bottom}}" bindpopuphide="popupBottom">
  <view class="popup-bottom"></view>
</vi-popup>

<script>
Page({
  data: {
    popupHide_bottom: false
  }
  popupBottom() {
    this.setData({
      popupHide_bottom: !this.data.popupHide_bottom
    })
  }
})
</script>

<style>
  .popup-bottom{
    height: 400rpx;
    background: #fff;
  }
</style>

头部出现

<vi-popup ishide="{{popupHide_top}}" position="top" bindpopuphide="popupTop">
  <view class="popup-top"></view>
</vi-popup>

<script>
Page({
  data: {
    popupHide_top: false
  }
  popupBottom() {
    this.setData({
      popupHide_top: !this.data.popupHide_top
    })
  }
})
</script>

<style>
  .popup-top{
    height: 400rpx;
    background: #fff;
  }
</style>

左侧出现

<vi-popup ishide="{{popupHide_left}}" position="left" bindpopuphide="popupLeft">
  <view class="popup-left"></view>
</vi-popup>

> 右侧出现
```HTML
<vi-popup ishide="{{popupHide_right}}" position="right" bindpopuphide="popupRight">
  <view class="popup-right"></view>
</vi-popup>

<script>
Page({
  data: {
    popupHide_right: false
  }
  popupBottom() {
    this.setData({
      popupHide_right: !this.data.popupHide_right
    })
  }
})
</script>

<style>
  .popup-right{
    width: 100px;
    height: 100%;
    background: #FFF;
  }
</style>

属性

event

版本记录

• v0.0.2 更新文档说明