小程序开发 page-container 页面容器弹出对话框功能的实现

目录
  • 前言
  • 效果图
  • 代码
  • .js
  • .wxml
  • .wxss

前言

小程序弹窗对话框实现

效果图

代码

.js

// pages/demo2/demo2.js
Page({

    data: {
        show:false
    },
    exitBtn:function(e) {
        this.setData({
            show:false
        })
    },

    showDialogBtn:function (e) {
        this.setData({
            show:true
        })
    }
})

.wxml

<!--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>

.wxss

/* pages/demo2/demo2.wxss */
page{
    background:tan;
}

到此这篇关于小程序开发 page-container 页面容器，弹出对话框的文章就介绍到这了,更多相关小程序开发弹出对话框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】

    微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】

    本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <form bindsubmit="formBindsubmit" bindreset="formReset"> <view style="display:flex;"> <label>用户名:</label> <input

  • 微信小程序使用modal组件弹出对话框功能示例

    微信小程序使用modal组件弹出对话框功能示例

    本文实例讲述了微信小程序使用modal组件弹出对话框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ①.index.wxml <view>提示:{{tip}}</view> <button type="default" bindtap="showModal">点击我弹出modal对话框</button> <view> <modal title="modal对话框"

  • 微信小程序 自定义对话框实例详解

    微信小程序 自定义对话框实例详解

    微信小程序 自定义对话框实例详解 效果图: index.wxml: <button type="default" bindtap="clickbtn"> 点击 </button> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <

  • 微信小程序自定义对话框弹出和隐藏动画

    微信小程序自定义对话框弹出和隐藏动画

    本文实例为大家分享了微信小程序自定义对话框弹出和隐藏动画的具体代码,供大家参考,具体内容如下 index.js //index.js var app = getApp(); let animationShowHeight = 300; Page({ data:{ animationData:"", showModalStatus:false, imageHeight:0, imageWidth:0 }, imageLoad: function (e) { this.setData({i

  • 微信小程序自定义模态对话框实例详解

    微信小程序自定义模态对话框实例详解

    由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal(OBJECT) 自定义 模态对话框 涉及文件 界面 wxml 样式 wxcss 事件及方法 js 效果图 界面代码 .wxml <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <!--

  • 小程序开发 page-container 页面容器弹出对话框功能的实现

    小程序开发 page-container 页面容器弹出对话框功能的实现

    目录 前言 效果图 代码 .js .wxml .wxss 前言 小程序弹窗对话框实现 效果图 代码 .js // pages/demo2/demo2.js Page({ data: { show:false }, exitBtn:function(e) { this.setData({ show:false }) }, showDialogBtn:function (e) { this.setData({ show:true }) } }) .wxml <!--pages/demo2/demo2

  • 微信小程序 开发之滑块视图容器(swiper)详解及实例代码

    微信小程序 开发之滑块视图容器(swiper)详解及实例代码

    微信小程序 开发之滑块视图容器详解 实现效果图: 实现起来特别简单,看看代码是怎么写的呢: <swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="

  • 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch

  • 微信小程序自定义纯净模态框（弹出框）的实例代码

    由于官方API提供的模态框只能显示简单的文字,但是在实际应用场景中,我们需要模态框上能够显示各种各样的组件和样式,所以,以此为基础模拟出一套可以供大家自定义的纯净版的模态框,满足大家各式各样的需求. 效果图: WXML: <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"

  • 微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

  • 微信小程序开发之实现自定义Toast弹框

    微信小程序开发之实现自定义Toast弹框

    前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了.有一个插件可以直接帮我们完成,WeToast. 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件. wetoast.js: 脚本代码 wetoast.wxml: 模板结构 wetoast.wxss: 样式 使用时只需要加入以上3个文件即可 第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使

  • 微信小程序商品详情页的底部弹出框效果

    电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置view的平移动画,达到从底部弹出的样式 1.js代码(一般情况下只调用显示对话框的函数,当点击对话框外部的时候,对话框可以消失) //显示对话框 showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.anim

  • JavaScript弹出对话框的三种方式

    JavaScript弹出对话框的三种方式

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框. javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行

  • 微信小程序开发之全局配置与页面配置实现

    微信小程序开发之全局配置与页面配置实现

    目录 一.全局配置 (1)小程序窗口的组成部分 (2)导航栏  navigationBar (3)下拉刷新页面 (4)上拉触底的距离 (5)底部导航栏 tabBar (6)图标的获取 二.页面配置 (1)概念 (2)页面配置与全局配置的关系 (3)常用配置项 三.综合案例 一.全局配置 app.json文件就是项目的全局配置文件 (1)小程序窗口的组成部分 (2)导航栏  navigationBar 1)window节点常用配置项 2)设置导航栏 设置导航栏标题文字 app.json-->win

随机推荐