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


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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
vue+express+jwt持久化登录的方法
Jun 14 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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 5.0 Pear安装方法
2006/12/06 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
AngularJS中的作用域实例分析
2018/05/16 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
mac系统安装Python3初体验
2018/01/02 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python流程控制 while循环实现解析
2019/09/02 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
django框架中间件原理与用法详解
2019/12/10 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
公司同意接收函
2014/01/13 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
文明寝室申报材料
2014/05/12 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL