微信小程序开发之——Dialog弹窗

这篇具有很好参考价值的文章主要介绍了微信小程序开发之——Dialog弹窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一 概述

小程序中弹窗的两种方式:

  • modal弹窗
  • WeUI组件dialog

二 弹窗原理

  • 在布局中事先放置好要显示的Dialog布局
  • 通过一个参数dialogShow控制Dialog的显示与隐藏
  • 点击按钮时,通过 this.setData({ dialogShow: false,})改变Dialog的值并改变Dialog的状态

三 modal弹窗

3.1 布局文件(modal.wxml)

<view class="container-view">
  <view>主题内容</view>
</view>
<!--modal-->
<!--弹窗-->
<view>
  <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}">
    <view class="modal-dialog" wx:if="{{showModal}}">
      <video src="https://res.wx.qq.com/wxaliveplayer/htdocs/video14e1eea.mov"></video>
    </view>
  </view>
</view>

3.2 样式文件(modal.wxss)

.container-view {
  width: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-mask {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-dialog {
  width: 80%;
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: fixed;
  margin: 0 auto;
  z-index: 9999;
  background: #f9f9f9;
  border-radius: 36rpx;
}

.container-view {
  width: 100%;
  height: 100%;
}

3.3 逻辑文件(modal.js)

Page({
  data: {
    showModal:true
  },
})

3.4 显示效果

四 WeUI组件dialog

4.1 项目引入WeUI

微信小程序开发之——WeUI快速上手文章来源地址https://www.toymoban.com/news/detail-494710.html

4.2 布局文件(dialog.wxml)

<view class="page" data-weui-theme="{{theme}}">
  <view class="page__bd">
    <view class="weui-btn-area">
      <button class="weui-btn" type="default" bindtap="openConfirm">确认取消按钮</button>
      <button class="weui-btn" type="default" bindtap="tapOneDialogButton">只有确认按钮</button>
    </view>
  </view>
  <mp-dialog title="test" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
  </mp-dialog>
  <mp-dialog title="test1" show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}">
    <view>test content1</view>
  </mp-dialog>
</view>

4.3 逻辑文件(dialog.js)

Page({
  data: {
    dialogShow: false,
    showOneButtonDialog: false,
    buttons: [{text: '取消'}, {text: '确定'}],
    oneButton: [{text: '确定'}],
  },
  openConfirm: function () {
    this.setData({
      dialogShow: true
    })
  },
  tapDialogButton(e) {
    this.setData({
      dialogShow: false,
      showOneButtonDialog: false
    })
  },
  tapOneDialogButton(e) {
    this.setData({
      showOneButtonDialog: true
    })
  }
})

4.4 显示效果图

五 参考

  • CSDN下载-dialog

到了这里,关于微信小程序开发之——Dialog弹窗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序开发 | 音乐小程序项目

    2023年04月20日
    浏览(45)
  • 微信小程序开发之微信小程序交互

    目录 一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端:           1、先导入依赖:           2、定义好配置文件           3、编写好实体类           4、将帮助类进行配置           5、编写mapper类           6、定义service层以及对应的

    2024年02月09日
    浏览(59)
  • 【微信小程序开发零基础入门】——微信小程序入门

    学习小程序跟学习网页开发有什么不同 1.如何创建微信小程序项目 1.1 注册、登录、复制appId 注册:在 https://mp.weixin.qq.com/cgi-bin/wx 进行注册微信小程序开发账号 登录:在 https://mp.weixin.qq.com 登录小程序账号 复制appId: 在 \\\"开发\\\" 的 \\\"开发管理\\\" 的 \\\"开发设置\\\" 的 \\\"开发者ID\\\"中 1.2 下

    2024年02月03日
    浏览(62)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(64)
  • 微信小程序开发教程(二)--上传小程序

    接上文,我们已经有一个小例子了。 在模拟器的位置,点击头像,会登录。 此时我们可以第一次尝试将我们的小程序进行上传。 点击下图箭头所指位置: 点击确定: 填写版本号和备注信息,选择上传: 在网页管理小程序上,选择上传,以下都选择红框所在位置: 填写相关

    2023年04月25日
    浏览(42)
  • 微信小程序开发---小程序的页面配置

    目录 一、小程序页面配置的作用 二、页面配置和全局配置的关系 三、页面配置中常用的配置项 在每个小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观,页面效果进行配置。 小程序中,app.json中的windows节点,可以全局配置小程序中每个页面的窗口表

    2024年02月09日
    浏览(48)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用,印象中需要小程序ID,去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载,我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(62)
  • 微信小程序隐私协议自定义页面(弹窗)开发流程以及低版本兼容

    这里我选择的是全局监听,进入小程序就会监控用户有没有同意,没有则进行弹窗,不同意则关闭,这个逻辑可以根据自己需要随便修改。 发现有很多人根据自己调试基础库来排查自己涉不涉及,你的小程序是否涉及隐私协议整改,还是看有没有调用涉及隐私接口,如果有,

    2024年01月16日
    浏览(61)
  • 【微信小程序开发】第 1 节 - 小程序简介

             欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、小程序与普通网页开发的区别 3、API 简介 4、总结         在日常生活中,我们几乎每天都在使用微信小程序,那么,这个微信小程序到底是怎么

    2024年02月07日
    浏览(46)
  • python做微信小程序开发,python怎么开发小程序

    大家好,小编来为大家解答以下问题,python做微信小程序开发,python怎么开发小程序,今天让我们一起来看看吧! 大家好,小编为大家解答用python编写一个小程序的问题。很多人还不知道如何用python做小软件,现在让我们一起来看看吧! 大家好,小编来为大家解答以下问题

    2024年03月12日
    浏览(67)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包