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


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 相关文章推荐
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
JS实现商品筛选功能
Aug 19 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 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中的字符串函数
2006/10/09 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
详细解读Python中解析XML数据的方法
2015/10/15 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python取代netcat过程分析
2018/02/10 Python
用python实现百度翻译的示例代码
2018/03/09 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
大学军训感言300字
2014/03/09 职场文书
意向协议书范本
2014/04/23 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
学生会招新宣传语
2015/07/13 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
Golang二维数组的使用方式
2021/05/28 Golang