微信小程序实现底部弹出模态框


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现底部弹出模态框的具体代码,供大家参考,具体内容如下

微信小程序实现底部弹出模态框

代码:

<view class="modals modals-bottom-dialog" hidden="{{hideModal}}" style="width:100%;height:{{widheight}}px">
 <view class="modals-cancel" bindtap="hideModal"></view>
 <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}">
 <view class="comment_top">
  <view></view>
  <view class="comment_num">{{comment.length}}条评论</view>
  <view class="comment_close" bindtap="hideModal">×</view>
 </view>
 <view class="comment_list">
  <view class="comment_li" wx:for="{{comment}}" wx:key="{{index}}">
  <image class="comment_li_img" src="{{item.headpic}}"></image>
  <view class="comment_li_info">
   <view class="comment_li_name">{{item.nickname}}</view>
   <view class="comment_li_content">{{item.memo}}
   <text class="comment_li_date">9-24</text>
   </view>
  </view>
  </view>
 </view>
 <view class="comment_inputbox">
  <input class="comment_input" maxlength="120" adjust-position value="{{commentform}}" bindinput="commentinput" placeholder="有何高见,讲来听听"></input>
  <view class="comment_sendbtn" bindtap="sendcomment">发送</view>
 </view>
 </view>
</view>

CSS:

/* 评论 */
/*模态框*/
.modals{
 position:fixed;
 z-index: 100000;
 top:0; 
 left: 0; 
 right:0; 
 bottom: 0;
 }
.modals-cancel{
 position:absolute; 
 z-index:1000; 
 top:0; 
 left: 0; 
 right:0; 
 bottom: 0; 
 /* background-color: rgba(0,0,0,.5); */
 }
.bottom-dialog-body{
 width: 99%;
 margin: 0 auto;
 position:absolute; 
 z-index:10001; 
 bottom:0; 
 left:0; 
 right:0; 
 height:65%; 
 background-color: #fff;
 border-top-left-radius: 10rpx;
 border-top-right-radius: 10rpx;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 }
/*动画前初始位置*/
.bottom-pos{
 -webkit-transform:translateY(100%);
 transform:translateY(100%);
}
.comment_top{
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-bottom: 1rpx solid #f2f2f2;
 padding: 10rpx 24rpx;
 box-sizing: border-box;
}
.comment_num{
 font-size: 30rpx;
}
.comment_close{
 font-size: 62rpx;
 line-height: 50rpx;
}
.comment_list{
 flex: 1;
 overflow: hidden;
}
.comment_li{
 display: flex;
 padding: 10rpx 24rpx;
 box-sizing: border-box;
}
.comment_li_img{
 width: 40rpx;
 height: 40rpx;
 border-radius: 50%;
 margin-right: 16rpx;
}
.comment_li_info{
 flex: 1;
}
.comment_li_name{
 font-size: 30rpx;
}
.comment_li_content{
 font-size: 28rpx;
}
.comment_li_date{
 color: #999;
 font-size: 24rpx;
 margin-left: 20rpx;
}
.comment_inputbox{
 display: flex;
 padding: 20rpx 24rpx;
 box-sizing: border-box;
 align-items: center;
 justify-content: space-between;
 border-top: 1rpx solid #f2f2f2;
}
.comment_input{
 font-size: 30rpx;
 flex: 1;
}
.comment_sendbtn{
 font-size: 30rpx;
 background: #dd5923;
 color: #fff;
 padding: 5rpx 18rpx;
 border-radius: 10rpx;
}

js:

Page({
 data: {
 hideModal: true, //模态框的状态 true-隐藏 false-显示
 animationData: {},
 },
 
 // 显示遮罩层
 showModal: function () {
 var that = this;
 that.setData({
  hideModal: false
 })
 var animation = wx.createAnimation({
  duration: 600,//动画的持续时间 默认400ms 数值越大,动画越慢 数值越小,动画越快
  timingFunction: 'ease',//动画的效果 默认值是linear
 })
 this.animation = animation
 setTimeout(function () {
  that.fadeIn();//调用显示动画
 }, 200)
 },

 // 隐藏遮罩层
 hideModal: function () {
 var that = this;
 var animation = wx.createAnimation({
  duration: 800,//动画的持续时间 默认400ms 数值越大,动画越慢 数值越小,动画越快
  timingFunction: 'ease',//动画的效果 默认值是linear
 })
 this.animation = animation
 that.fadeDown();//调用隐藏动画 
 setTimeout(function () {
  that.setData({
  hideModal: true
  })
 }, 720)//先执行下滑动画,再隐藏模块

 },

 //动画集
 fadeIn: function () {
 this.animation.translateY(0).step()
 this.setData({
  animationData: this.animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
 })
 },
 fadeDown: function () {
 this.animation.translateY(300).step()
 this.setData({
  animationData: this.animation.export(),
 })
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
js变量以及其作用域详解
Jul 18 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
微信小程序实现左滑删除效果
Nov 18 #Javascript
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
微信小程序实现多张图片上传功能
Nov 18 #Javascript
You might like
php adodb连接不同数据库
2009/03/19 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
vue element upload实现图片本地预览
2019/08/20 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python将txt文件读取为字典的示例
2018/12/22 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python基础教程之while循环
2019/08/14 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
入党思想汇报
2014/01/05 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Python first-order-model实现让照片动起来
2022/06/25 Python