1 Star 0 Fork 1

EasonKxg/小程序弹框支持(底部,顶部,左侧,右侧,中间)

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
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;
}

截图

顶部 输入图片说明

底部 输入图片说明

左侧 输入图片说明

右侧 输入图片说明

中间 输入图片说明

空文件

简介

小程序自定义弹框(底部,顶部,左侧,右侧,中间) 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/EasonKxg/pop-up.git
git@gitee.com:EasonKxg/pop-up.git
EasonKxg
pop-up
小程序弹框支持(底部,顶部,左侧,右侧,中间)
master

搜索帮助