介绍 & lt;视图类=扒樘蕀odals-bottom-dialog"隐藏=皗{hideModal}},比;
& lt;视图类=癿odals-cancel"bindtap=癶ideModal"祝辞& lt;/view>
& lt;视图类=癰ottom-dialog-body bottom-pos"动画=皗{animationData}}“比;
& lt;视图类=癱omment_top"祝辞
& lt; view> & lt;/view>
& lt;视图类=癱omment_num"在{{comment.length}}条评论& lt;/view>
& lt;视图类=癱omment_close"bindtap=癶ideModal"祝辞×& lt;/view>
& lt;/view>
& lt;视图类=癱omment_list"祝辞
& lt;视图类=癱omment_li"天气:=皗{评论}},天气:关键=皗{指数}}“比;
& lt;图象类=癱omment_li_img"https://www.yisu.com/zixun/src=" {{item.headpic}} ">
<视图类=" comment_li_info ">
<视图类=" comment_li_name "> {{item.nickname}}
<视图类=" comment_li_content "> {{item.memo}}
<文本类=" comment_li_date "> 9-24
<视图类=" comment_inputbox ">
<输入类=" comment_input“最大长度=" 120 "调整位置value=" {{commentform}} " bindinput=癱ommentinput”占位符=庇泻胃呒?讲来听听">
<视图类=" comment_sendbtn“bindtap=" sendcomment ">发送
页面({
数据:{
hideModal:真的,//模态框的状态真的——隐藏假——显示
animationData: {},
},//显示遮罩层
showModal:函数(){
var=这个;
that.setData ({
hideModal:假
})
var动画=wx.createAnimation ({
持续时间:600//动画的持续时间默认400毫秒数值越大,动画越慢数值越小,动画越快
timingFunction: & # 39;缓解# 39;//动画的效果默认值是线性的
})
这一点。动画=动画
setTimeout(函数(){
that.fadeIn();//调用显示动画
},200)
},//隐藏遮罩层
hideModal:函数(){
var=这个;
var动画=wx.createAnimation ({
持续时间:800//动画的持续时间默认400毫秒数值越大,动画越慢数值越小,动画越快
timingFunction: & # 39;缓解# 39;//动画的效果默认值是线性的
})
这一点。动画=动画
that.fadeDown();//调用隐藏动画
setTimeout(函数(){
that.setData ({
hideModal:真
})
},720)//先执行下滑动画,再隐藏模块
},//动画集
渐明:函数(){
this.animation.translateY (0) .step ()
this.setData ({
animationData: this.animation.export()//动画实例的出口方法导出动画数据传递给组件的动画属性
})
},
fadeDown:函数(){
this.animation.translateY (300) .step ()
this.setData ({
animationData: this.animation.export (),
})
},
})
小程序开发中如何实现一个底部弹出模态框功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
具体内容如下
代码:
CSS:
/*评论*//*模态框*/.modals {
位置:固定;
z - index: 100000;
上图:0;
左:0;
右:0;
底部:0;
}
.modals-cancel {
位置:绝对的;
z - index: 1000;
上图:0;
左:0;
右:0;
底部:0;/*背景颜色:rgba (0, 0, 0, 0。5);*/}
.bottom-dialog-body {
宽度:99%;
保证金:0汽车;
位置:绝对的;
z - index: 10001;
底部:0;
左:0;
右:0;
高度:65%;
background - color: # fff;
border-top-left-radius: 10 rpx;
border-top-right-radius: 10 rpx;
溢出:隐藏;
显示:flex;
flex-direction:列;
}/*动画前初始位置*/.bottom-pos {
-webkit-transform: translateY (100%);
变换:translateY (100%);
}
.comment_top {
宽度:100%;
显示:flex;
justify-content:之间的空间;
对齐项目:中心;
边界底部:1 rpx固体# f2f2f2;
填充:10 rpx 24 rpx;
box-sizing: border-box;
}
.comment_num {
字体大小:30 rpx;
}
.comment_close {
字体大小:62 rpx;
行高:50 rpx;
}
.comment_list {
flex: 1;
溢出:隐藏;
}
.comment_li {
显示:flex;
填充:10 rpx 24 rpx;
box-sizing: border-box;
}
.comment_li_img {
宽度:40 rpx;
高度:40 rpx;
这个特性:50%;
margin-right: 16 rpx;
}
.comment_li_info {
flex: 1;
}
.comment_li_name {
字体大小:30 rpx;
}
.comment_li_content {
字体大小:28 rpx;
}
.comment_li_date {
颜色:# 999;
字体大小:24 rpx;
margin-left: 20 rpx;
}
.comment_inputbox {
显示:flex;
填充:20 rpx 24 rpx;
box-sizing: border-box;
对齐项目:中心;
justify-content:之间的空间;
border-top: 1 rpx固体# f2f2f2;
}
.comment_input {
字体大小:30 rpx;
flex: 1;
}
.comment_sendbtn {
字体大小:30 rpx;
背景:# dd5923;
颜色:# fff;
填充:5 rpx 18 rpx;
border - radius: 10 rpx;
} js:
