# 小程序弹框支持（底部，顶部，左侧，右侧，中间）

**Repository Path**: EasonKxg/pop-up

## Basic Information

- **Project Name**: 小程序弹框支持（底部，顶部，左侧，右侧，中间）
- **Description**: 小程序自定义弹框（底部，顶部，左侧，右侧，中间）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/CodingError/pop-up
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-07
- **Last Updated**: 2023-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 小程序, 弹框, 自定义

## README

# 小程序自定义弹框（底部，顶部，左侧，右侧，中间）
 **宽高度自适应** 

## 安装
 git clone https://gitee.com/CodingError/pop-up.git

 或者 直接下载复制在自己项目里面

 `{
  "usingComponents": {
    "pop-up":"/components/pop-up/pop-up"
  }
}
`
## 使用
| 参数       | 必传 | 作用       |
|----------|----|----------|
| ststus   | 是  | 控制组件是否显示 |
| showType | 是  | 弹框触发的位置  |

## 注意
 使用 侧边栏的时候要要设置高度:height:100%;
 
## 代码
 **index** 


```
<view class="item_wrap">
  <view class="item" data-type="top" bindtap="handleTypeClick">顶部</view>
  <view class="item" data-type="bottom" bindtap="handleTypeClick">底部</view>
  <view class="item" data-type="left" bindtap="handleTypeClick">左边</view>
  <view class="item" data-type="right" bindtap="handleTypeClick">右边</view>
  <view class="item" data-type="cenent" bindtap="handleTypeClick">中间</view>
</view>

<pop-up ststus="{{ststus}}" showType="{{showType}}" bindonCancel="handleCancle">
  <!-- 底部 顶部 -->
  <view class="bottom_top_wrap" wx:if="{{showType == 'top' || showType == 'bottom'}}">
    <view class="btn_wrap">
      <view class="left_btn" bindtap="handleCancle">取消</view>
      <view class="right_btn" bindtap="handleCancle">确认</view>
    </view>
    <view wx:for="{{5}}" wx:key="index">底部 顶部</view>
  </view>

  <!-- 左边 右边 -->
  <view class="left_right_wrap" wx:if="{{showType == 'left' || showType == 'right'}}">
    <view class="btn_wrap">
      <view class="left_btn" bindtap="handleCancle">取消</view>
      <view class="right_btn" bindtap="handleCancle">确认</view>
    </view>
    <view wx:for="{{5}}" wx:key="index">左边 右边</view>
  </view>

  <!-- 中间 -->
  <view class="cenent_wrap" wx:if="{{showType == 'cenent'}}">
    <view class="btn_wrap">
      <view class="left_btn" bindtap="handleCancle">取消</view>
      <view class="right_btn" bindtap="handleCancle">确认</view>
    </view>
    <view wx:for="{{5}}" wx:key="index">左边 右边</view>
  </view>
</pop-up>
```

 **js** 

```

Page({
  data: {
    showType: "bottom",
    ststus: false,
  },
  handleTypeClick(e) {
    let type = e.currentTarget.dataset.type
    if (type == "top") {
      this.setData({
        ststus: true,
        showType: "top"
      })
    } else if (type == "bottom") {
      this.setData({
        ststus: true,
        showType: "bottom"
      })
    } else if (type == "left") {
      this.setData({
        ststus: true,
        showType: "left"
      })
    } else if (type == "right") {
      this.setData({
        ststus: true,
        showType: "right"
      })
    } else if (type == "cenent") {
      this.setData({
        ststus: true,
        showType: "cenent"
      })
    }
  },
  handleCancle() {
    this.setData({
      ststus: false,
    })
  }
})
```


 **css** 
```
.item_wrap {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 60%;
}
.item_wrap .item {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid #eee;
}
.bottom_top_wrap {
  width: 100%;
}
.left_right_wrap {
  height: 100%;
}
.cenent_wrap {
  width: 500rpx;
  height: 500rpx;
}
.btn_wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #eee;
}
.btn_wrap .left_btn {
  color: #5d5c5c;
  margin-left: 30px;
}
.btn_wrap .right_btn {
  color: #57bd6a;
  margin-right: 30rpx;
}

```

## 截图
 **顶部** 
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/211337_c2579d1f_5440594.jpeg "在这里输入图片标题")

 **底部**
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/211422_a317b454_5440594.jpeg "微信图片_202107082040251.jpg") 

 **左侧** 
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/211440_659955bf_5440594.jpeg "微信图片_20210708204105.jpg")

 **右侧**
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/211457_b5137b7e_5440594.jpeg "微信图片_202107082040252.jpg") 

 **中间** 
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/211515_39675996_5440594.jpeg "微信图片_20210708204056.jpg")