目录前言效果图代码.js.wxml.wxss前言 小程序弹窗对话框实现 效果图 代码 .js // pages/demo2/demo2.js Page({ data: {
小程序弹窗对话框实现
// pages/demo2/demo2.js
Page({
data: {
show:false
},
exitBtn:function(e) {
this.setData({
show:false
})
},
showDialogBtn:function (e) {
this.setData({
show:true
})
}
})
<!--pages/demo2/demo2.wxml-->
<button bindtap="showDialogBtn">显示对话框</button>
<!--
page-container 的参数:
属性 类型 默认值 必填 说明
show boolean false 否 是否显示容器组件
duration number 300 否 动画时长,单位毫秒
z-index number 100 否 z-index 层级
overlay boolean true 否 是否显示遮罩层
position string bottom 否 弹出位置,可选值为 top bottom right center
round boolean false 否 是否显示圆角
close-on-slideDown boolean false 否 是否在下滑一段距离后关闭
overlay-style string 否 自定义遮罩层样式
custom-style string 否 自定义弹出层样式
bind:beforeenter eventhandle 否 进入前触发
bind:enter eventhandle 否 进入中触发
bind:afterenter eventhandle 否 进入后触发
bind:beforeleave eventhandle 否 离开前触发
bind:leave eventhandle 否 离开中触发
bind:afterleave eventhandle 否 离开后触发
bind:clickoverlay eventhandle 否 点击遮罩层时触发
-->
<page-container show="{{show}}" round="true" bind:afterleave="afterLeave" >
<view style="display:flex; flex-direction: column;">
<text style="text-align: center; padding-top: 5%; padding-bottom: 5%; background-color: greenyellow;">标题</text>
<text style="text-align: center; padding-top: 20%; padding-bottom: 20%; background-color: aqua; ">内容</text>
<button bindtap="exitBtn" style="width: 100%; background-color: grey;" >退出</button>
</view>
</page-container>
page{
background:tan;
}
到此这篇关于小程序开发 page-container 页面容器,弹出对话框的文章就介绍到这了,更多相关小程序开发弹出对话框内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 小程序开发 page-container 页面容器弹出对话框功能的实现
本文链接: https://www.lsjlt.com/news/172095.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0