微信小程序の自定义弹窗

最新推荐文章于 2024-09-09 14:49:05 发布

胖子ღ牛逼

最新推荐文章于 2024-09-09 14:49:05 发布

阅读量973

点赞数 1

分类专栏：微信小程序文章标签：自定义弹窗微信小程序

本文链接：https://blog.csdn.net/z_xuewen/article/details/86419039

版权

本文介绍如何在微信小程序中实现自定义弹窗功能，包括wxml结构、样式设置和JavaScript函数，可用于多种场景如密码输入、错误提示等。

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

自定义弹框，话不多说先上效果图~哈哈哈

开始上代码啦。

首先在 wxml 上写蒙层属类modal-mask和弹框层 modal-dialog，此层又分为三部分，title、content、footer 很经典的结构对不对！?

<view class="modal-mask" wx:if="{
  {showModal}}"></view>
<view class="modal-dialog" wx:if="{
  {showModal}}">
  <view class="modal-title">{
  {title}}</view>
  <view class="modal-content">
    <view class='content-show-text'>
      <text>{
  {content}}</text>
    </view>
  </view>
  <view class="modal-footer">
    <view class="btn-cancel" bindtap="onCopy">复制</view>
    <view class="btn-confirm" bindtap&