uni-popup使用 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 15 天

uni-popup是小程序开发过程中比较常用的一个ui组件了吧，至少我是使用比较多的，中间弹出，提示的话可以用小程序自带的，uni.showToast，uni.showModal,这个适合封装更多一点功能的应用场景使用，比如，要给用户输入一些表单，一些列表选择，就可以使用这个

常用提示

uni.showToast

一般，uni.showToast()和uni.navigateBack()一块使用，比如提交表单或发送什么请求之后，已经没有停留在本页面的必要了，就利用settimeout延时退出，不然展示出来的toast会在页面unload之后也一起消失，用户都没看清提示内容，就被你给退出了，用户体验就不太好，延时也不能延太久，避免用户乱点，导致误操作

uni.showModal

    uni.showModal({
          title: "提示",
          content:
            "提示用户的内容",
          success: (res) => {
            if (res.confirm) {
              _this.$emit("launchRefund");
              _this.$emit("popupStatusChange", false);
            }
          },
        });

这个经常用于二次确认吧感觉，比如要删除比较重要的信息，用这个让用户再确认一次，当用户点击确认后用res.confirm判断用户确认删除，这时候再去调接口请求数据或修改删除数据

中间弹出

这个在小程序中用了好多好多次了，但也要记录一下，实现起来也比较简单

就是直接用一个view包住要展示的内容，在中间显示的时候width就不能设置100%或750rpx

不然会把宽度占满，不好看

<uni-popup ref="popup">
    <view></view>
</uni-popup>

vue2中this.$refs.popup.open();就能弹出，它还有一个close的方法，这个可以点击mask触发，也可以手动js触发，对于需要处理close之后的业务逻辑的，就监听close，一般不用去手动调close

底部弹出

这个是今天才用到的

这个实现需要多套一层，不然圆角的效果实现不出来

    <uni-popup
      ref="popup"
      type="bottom"
      background-color="rgba(245, 245, 245, 1)"
    >
      <view style="background-color: rgba(0, 0, 0, 0.4); height: 630rpx">
        <scroll-view
          scroll-y="true"
          style="
            height: 100%;
            background-color: rgba(245, 245, 245, 1);
            width: 100%;
            padding-left: 30rpx;
            box-sizing: border-box;
            margin: 0 auto;
            border-radius: 20rpx 20rpx 0 0;
          "
        >
        </scroll-view>
      </view>
    </uni-popup>

就这样，简简单单啦