uni-popup(实现自定义弹窗提示、交互)

这篇具有很好参考价值的文章主要介绍了uni-popup(实现自定义弹窗提示、交互)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        一般提示框的样式,一般由设计稿而定,如果用uniapp的showmodel,那个并不能满足我们需要的自定义样式,所以最好的方式是我们自己封装一个!(想什么样就什么样)!

一、页面效果

uni-popup(实现自定义弹窗提示、交互),交互,前端,javascript,css,微信小程序

二、使用uni-popup

直接看代码吧!

<template>
  <view>
    <uni-popup ref="tipPopup" type="center" :is-mask-click="true">
      <view class="pop">
        <view class="title">
          温馨提示
        </view>
        <!-- 提示icon -->
        <view class="tip-img">
          <image src="../../static/image/tip/tip-icon.png" mode=""></image>
        </view>
        <view class="tip-info">
          {{title}}
        </view>
        <view class="sure" @click="sure">
          确定
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    name:"showTip",
    props:["title"],
    data() {
      return {
        
      };
    },
    methods: {
      open() {
        this.$refs.tipPopup.open()
      },
      sure() {
        this.$refs.tipPopup.close()
      }
    }
  }
</script>

<style scoped>
.pop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 16rpx;
    height: 576rpx;
    z-index: 99;
    width: 640rpx;
    padding: 30rpx 0;
  }
  .title {
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    margin-top: 38rpx;
  }
  .tip-img {
    margin: 0 auto;
    width: 296rpx;
    height: 204rpx;
    margin-top: 64rpx;
  }
  .tip-img image {
    width: 100%;
    height: 100%;
  }
  .tip-info {
    padding: 0 30rpx;
    font-size: 34rpx;
    color: #666;
    margin-top: 32rpx;
    margin-bottom: 64rpx;
    text-align: center;
  }
  .sure {
    width: 100%;
    border-top: 1rpx solid #d1d1d1;
    height: 112rpx;
    text-align: center;
    line-height: 112rpx;
    color: #02A53C;
    font-size: 34rpx;
    font-weight: 500;
  }
</style>

我这里是把他封装成组件,一般这种交互性的,用得到的地方比较多,也建议封装成组件进行使用。

三、在页面中使用

uni-popup(实现自定义弹窗提示、交互),交互,前端,javascript,css,微信小程序

主要是这俩个方法控制关和开。

导入和使用:

<!-- 错误提示弹窗 -->
    <showTip ref="showtip" :title="tiptitle"></showTip>
import showTip from "/components/showTip/showTip.vue";

 声明:

在data中声明数据:

privacyVisible: false,
tiptitle: "错误",

声明组件: 

components: {
      showTip
    },

然后就可以使用了:

uni-popup(实现自定义弹窗提示、交互),交互,前端,javascript,css,微信小程序

比如:

uni-popup(实现自定义弹窗提示、交互),交互,前端,javascript,css,微信小程序

 顺便把错误的提示文字传进去组件,组件通过props接收直接使用。

根据这个规则,就可以在此基础上封装成自己需要的样式就可以了!文章来源地址https://www.toymoban.com/news/detail-841324.html

到了这里,关于uni-popup(实现自定义弹窗提示、交互)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 小程序端使用uni-popup组件时,页面用了scroll-view滚动组件,uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案

    在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent=\\\"\\\" 和一个样式height: 100vh;    

    2024年02月10日
    浏览(57)
  • react18 hooks自定义移动端Popup弹窗组件RcPop

    基于 React18 Hooks 实现手机端弹框组件 RcPop react-popup 基于 react18+hook 自定义多功能弹框组件。整合了 msg/alert/dialog/toast及android/ios 弹窗效果。支持 20+ 自定义参数、 组件式+函数式 调用方式,全方位满足各种弹窗场景需求。 在需要使用弹窗的页面引入组件。 RcPop支持  组件式+函

    2024年02月15日
    浏览(39)
  • 前端Vue自定义发送短信验证码弹框popup 实现剩余秒数计数 重发短信验证码

    前端Vue自定义发送短信验证码弹框popup 实现剩余秒数计数 重发短信验证码, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 实现代码如下: 使用方法 HTML代码实现部分 组件实现代码

    2024年02月11日
    浏览(38)
  • 1. 使用Popup组件自定义弹框提示页面

    在QT中,经常使用QMessageBox进行弹框的提示,而在QML中并没有这个功能,但是可以利用Popup组件进行自定义弹框的设计。 该组件可以理解为是一个空白区域,默认的visible属性是false,即不显示,需要用户手动设置其为true,才能显示出来。或者使用其自带的open()和close()函数打开

    2024年02月07日
    浏览(49)
  • 【WPF】消息蒙版弹窗UI以及await实现等待反馈(popup)

    原版的消息框太丑?不喜欢?如果您对原版消息框的外观不太满意,或者不符合您的应用程序的需求,那么可以通过自定义消息框来实现所需的外观和功能。 原版的消息框: 可以看出这个消息框可能和你设计的UI界面格格不入 自定义消息框可以实现各种风格和布局的效果。

    2024年02月03日
    浏览(43)
  • uni-app 点击蒙版层时关闭自定义弹窗

    @click.stop:用于阻止冒泡 @click.stop 标签范围内,点击任何区域(包括 @click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗 @click.stop 标签内的 @click 等事件:如果事件内有关闭弹窗的代码可关闭弹窗 在 template 中 在 script 中 toMoveHandle 方法请查看:uniapp 禁止遮罩层下的页面滚

    2024年02月07日
    浏览(47)
  • uni-app点击按钮弹出提示框(以弹窗的形式显示),选择确定和取消

    学习目标如下所示: uni-app点击提交按钮后弹出提示框,(以弹窗的形式显示),提示用户是否确认提交(即确定和取消),点击确定后调用真正的提交方法,将数据传给后端,点击取消后,模态框自动消失,不请求后端接口。 内容如下所示: 显示用户需要确认的模态框 点击

    2024年02月15日
    浏览(35)
  • 【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup,其中包含图片和名称

    在微信小程序中,你可以使用weui组件库来实现弹出一个确认的popup,并在其中包含图片和名称。以下是一个示例代码: 在wxml文件中,添加一个按钮来触发弹出确认popup: 在wxss文件中,定义确认popup的样式: 在js文件中,编写相应的逻辑来显示和隐藏确认popup,并传递图片和名

    2024年02月17日
    浏览(55)
  • chrome 扩展 popup 弹窗的使用

    popup介绍 popup 是点击 browser_action 或者 page_action 图标时打开的一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性的交互。 popup配置 V3版本中(V2版本是在 browser_action 中 ),可以通过配置文件( manifest.json )中 action 里面的 default_popup 字段来指定 popup 页面,也

    2024年02月05日
    浏览(38)
  • uniapp小程序手写封装popup弹窗message提醒框组件

    在写uniapp小程序的时候,弹窗提醒经常会用到,虽然弹窗的组件很多,但是通常别人封装好的弹窗组件自定义度不高,很难匹配自己的ui需求。所以本篇文章教大家封装自己的弹窗提醒组件 取消和确认按钮的点击事件使用$emit传事件。中间的文字部分接收父组件的传值。 css大

    2024年02月11日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包