小程序自定义一个弹窗

大大。

已于 2022-05-22 18:00:38 修改

阅读量431

点赞数

分类专栏：小程序 css样式文章标签：微信小程序

于 2022-04-12 17:41:20 首次发布

本文链接：https://blog.csdn.net/weixin_43923808/article/details/124129718

版权

小程序同时被 2 个专栏收录

48 篇文章 3 订阅

订阅专栏

css样式

12 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue中创建一个弹框组件，并通过`catchtouchmove`属性来防止页面滚动。内容包括模板结构、数据定义、方法实现以及相应的CSS样式，用于关闭图标和弹框的定位及样式。此示例可用于移动端应用中需要弹窗交互的场景。

摘要由CSDN通过智能技术生成

效果图：其中 catchtouchmove="catchtouchmove" 为了让弹框出来禁止页面滚动

<template>
<view wx:if="{{usModel}}"
          catchtouchmove="catchtouchmove">
      <view class="model_wai"></view>
      <view class="tk_wai">
        <view class="tk_model">
          <view class="flex_jz">
            <view class="close icon"
                  @tap="us_Click"></view>
          </view>
          <view class="font_title">标题</view>
        </view>
      </view>
    </view>
</template>

<script>
  data = {
    usModel: false,
}
methods = {
  us_Click () {
      this.usModel = !this.usModel
      this.$apply()
    },
}
</script>

//样式
<style>
.model_wai {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.65;
  overflow: hidden;
}
.tk_wai {
  position: relative;
  display: flex;
  justify-content: center;
  .tk_model {
    border-radius: 15rpx;
    padding: 30rpx;
    position: fixed;
    top: 180rpx;
    width: 700rpx;
    background: white;
    z-index: 1001;
  }
}
.font_title {
  display: flex;
  justify-content: center;
  color: rgba(16, 16, 16, 100);
  font-size: 36rpx;
}
//叉叉
.close.icon {
  color: #000;
  position: absolute;
  right: 28rpx;
  top: 23rpx;
  width: 19px;
  height: 19px;
}
.close.icon:before {
  content: '';
  position: absolute;
  top: 10px;
  width: 19px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.close.icon:after {
  content: '';
  position: absolute;
  top: 10px;
  width: 19px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>