小程序Dialog弹出窗

js

// pages/dialog/dialog.js
Page({/*** 页面的初始数据*/data: {showModalStatus: false},click1:function(){wx.showToast({title: '纯文字弹窗',icon: 'none',    //如果要纯文本，不要icon，将值设为'none'duration: 2000     })  },click2:function(){wx.showModal({title: 'confirm的弹窗',content: '确认要删除该项吗？',success: function (res) {if (res.confirm) {  console.log('点击确认回调')} else {   console.log('点击取消回调')}}})},click3:function(){wx.showToast({title: '成功提示弹窗',icon: '',     //默认值是success,就算没有icon这个值，就算有其他值最终也显示successduration: 2000,      //停留时间})},click4:function(){wx.showToast({title: '带蒙层的弹窗',     duration: 200,    mask:true    //是否有透明蒙层，默认为false //如果有透明蒙层，弹窗的期间不能点击文档内容 })},click4:function(){wx.showToast({title: '带蒙层的弹窗',     duration: 2000,    mask:true    //是否有透明蒙层，默认为false //如果有透明蒙层，弹窗的期间不能点击文档内容 })},click5:function(){wx.showLoading({title:'加载中...'});},click6:function(){wx.showToast({title: '自定义图标弹窗',image: '../../icons/nav.png',  //image的优先级会高于iconduration: 2000     })},click7:function(){wx.showActionSheet({itemList: ['A', 'B', 'C'],success: function (res) {console.log(res);}})},powerDrawer:function(e){var currentStatu = e.currentTarget.dataset.statu;this.util(currentStatu)},util: function(currentStatu){/* 动画部分 */// 第1步：创建动画实例 var animation = wx.createAnimation({duration: 200,  //动画时长timingFunction: "linear", //线性delay: 0  //0则不延迟});// 第2步：这个动画实例赋给当前的动画实例// this.animation = animation;
//  // 第3步：执行第一组动画 opacity()起始透明度 //3维空间上x轴上一个旋转animation.opacity(0).rotateX(-100).step();// 第4步：导出动画对象赋给数据对象储存this.setData({animationData: animation.export()})// 第5步：设置定时器到指定时候后，执行第二组动画setTimeout(function () {// 执行第二组动画animation.opacity(1).rotateX(0).step();// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象this.setData({animationData: animation})//关闭if (currentStatu == "close") {this.setData({showModalStatus: false});}}.bind(this), 200)// 显示if (currentStatu == "open") {this.setData({showModalStatus: true});}}
})

wxml

<!--pages/dialog/dialog.wxml-->
<view bindtap='click1' style="text-align: center;border-radius: 6px; width: 80%;margin: 20px 10%; background-color: black;color: white;padding: 10px;" ><text>纯文本提示 </text>
</view>
<view bindtap='click2' style="text-align: center;border-radius: 6px; width: 80%;margin: 20px 10%; background-color: black;color: white;padding: 10px;" ><text>取消确认提示 </text>
</view>
<view bindtap='click3' style="text-align: center;border-radius: 6px; width: 80%;margin: 20px 10%; background-color: black;color: white;padding: 10px;" ><text>成功提示 </text>
</view>
<view bindtap='click4' style="text-align: center;border-radius: 6px; width: 80%;margin: 20px 10%; background-color: black;color: white;padding: 10px;" ><text>带蒙层的弹窗 </text>
</view>
<!-- 使用wx.showLoading触发的弹窗，需要用wx.hideLoading()来关闭。 -->
<view bindtap='click5' style="text-align: center;border-radius: 6px; width: 80%;margin: 20px 10%; background-color: black;color: white;padding: 10px;" ><text>加载中提示 </text>
</view>
<view bindtap='click6' style="text-align: center;border-radius: 6px; width: 80%;margin: 20px 10%; background-color: black;color: white;padding: 10px;" ><text>自定义图标弹窗 </text>
</view>
<view bindtap='click7' style="text-align: center;border-radius: 6px; width: 80%;margin: 20px 10%; background-color: black;color: white;padding: 10px;" ><text>有列表弹窗 </text>
</view>
<view bindtap='powerDrawer' data-statu="open" style="text-align: center;border-radius: 6px; width: 80%;margin: 20px 10%; background-color: black;color: white;padding: 10px;" ><text>动画弹窗 </text>
</view><!-- mask -->
<view data-statu="close" style="width: 100%;height: 100%;overflow: hidden;z-index: 9;position: fixed;left: 0;top: 0; background-color: black;opacity: 0.5;" bindtap="powerDrawer" wx:if="{{showModalStatus}}">
</view><!-- content -->
<view catchtouchmove="true"  animation = "{{animationData}}" wx:if="{{showModalStatus}}"
style="width: 650rpx;overflow: hidden;position: fixed;left: 0;top: 0; z-index: 10;background-color: #FAFAFA;margin: 30% 50rpx 0 50rpx;border-radius: 6px; " ><view style="text-align: center;padding: 15px;" >弹窗标题</view> <view style="display: flex;flex-direction: row;padding: 5px 20px;align-items: center;" hover-class="none" hover-stop-propagation="false"><text style="font-size: 13px; color: gray;width: 50px;" >标题</text><input type="text" style="width: 50%;flex: 1;border: 1px solid gray;padding: 5px;font-size: 13px;" value="可自行定义内容"/> </view>  <view style="display: flex;flex-direction: row;padding: 5px 20px;align-items: center;" hover-class="none" hover-stop-propagation="false"><text style="font-size: 13px; color: gray;width: 50px;" >标题</text><input type="text" style="width: 50%;flex: 1;border: 1px solid gray;padding: 5px;font-size: 13px;" value="110"/> </view> <view style="display: flex;flex-direction: row;padding: 5px 20px;align-items: center;" hover-class="none" hover-stop-propagation="false"><text style="font-size: 13px; color: gray;width: 50px;" >标题</text><input type="text" style="width: 50%;flex: 1;border: 1px solid gray;padding: 5px;font-size: 13px;" value="拒绝伸手党"/> </view> <view style="display: flex;flex-direction: row;padding: 5px 20px;align-items: center;" hover-class="none" hover-stop-propagation="false"><text style="font-size: 13px; color: gray;width: 50px;" >标题</text><input type="text" style="width: 50%;flex: 1;border: 1px solid gray;padding: 5px;font-size: 13px;" value="仅供学习使用"/> </view> <view style="display: flex;flex-direction: row;padding: 5px 20px;align-items: center;" hover-class="none" hover-stop-propagation="false"><text style="font-size: 13px; color: gray;width: 50px;" >备注</text><input type="text" style="width: 50%;flex: 1;border: 1px solid gray;padding: 5px;font-size: 13px;" value=""/> </view> <view bindtap='powerDrawer' data-statu="close" style="font-size: 20px;font-weight: bold;color: green;text-align: center;border-top: 1px solid gray;height: 40px;line-height: 40px;" hover-class="none" hover-stop-propagation="false">确 认</view>
</view>

wxss

/* pages/dialog/dialog.wxss */
.title {height: 30px;line-height: 30px;width: 160rpx;text-align: center;display: inline-block;font: 300 28rpx/30px "microsoft yahei";
}
.col-0 {-webkit-box-flex:0;box-flex:0;}

小程序Dialog弹出窗相关推荐

微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式
vantweapp中Dialog弹出框使用组件调用,怎么将form表单的提交按钮与Dialog弹出框相结合呢解决方案: wxml代码 <van-dialoguse-slottitle=&quo ...
小程序实现弹出输入框
1.微信自带组件样式: wxml <view class="close" bindtap="close">拒绝</view> js P ...
html5底部悬浮添加到桌面,桌面小程序在弹出的界面点击“添加到桌面”
有个小程序怎么操作到桌面上? 欢迎来到CSS布局HTML,你是不是想把微信小程序弄到手机桌面上? 在小程序右上角有三个点点开,里面有个添加到桌面.下图以跳一跳游戏小程序为例,手机要打开快捷方式的权限. ...
微信小程序无法弹出授权登录窗口
微信小程序开发,小程序接口问题..... 今天在写微信小程序的时候,为了获取到后台的token,必须要获取到code,encryptedData,iv ,rawData,signature五个值.co ...
微信小程序—自定义弹出式键盘（车牌键盘、十六进制键盘），可快速定义不同场景键盘
摘要小程序input组件提供的键盘有四种(text-文本.number-数字.idcard-身份证.digit-小数点),但输入场景万千,很多情况下都需要排除不必要的干扰,比如车牌输入.色值输入,或 ...
微信最新授权登录微信小程序无法弹出授权弹框 open-type getUserInfo获取不到用户信息授权不弹框
解决办法使用getUserProfile接口 !!!! 大大的坑啊,调试了半天 getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接 ...
自定义小程序popupwindow弹出框
在上方弹出 wxml <view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}"><v ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
android 广告close,小程序广告弹出与关闭
一.无时间间隔广告弹出实现效果 1.思考: 进入页面广告就存在,关闭之后不显示,需要用wx:if来控制页面是否渲染(是否显示), wx:if="true"显示,false不显示 ...
微信小程序input弹出键盘挡住文字的解决办法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 解决思路:阻止键盘弹起时,自动上推页面.输入框获取焦点的时候让页面绝对定位,相对底部 100 像素.失去焦点的 ...

小程序Dialog弹出窗

js

wxml

wxss

小程序Dialog弹出窗相关推荐

最新文章

热门文章