本文实例为大家分享了微信小程序自定义可滚动弹出框的具体代码，供大家参考，具体内容如下
最近在写一个装修的活动，规则是点击按钮弹出加上相应的动画。
首先我们需要一个按钮触发显示（如图，点击详细规则显示规则模态框，图二右边的滚动条在手机上不显示）
思路：小程序自己的模态框不能写样式，这是个比较尴尬的情况，这是一个比较小白的解决方案：
在前端写一个视窗，默认让它隐藏
我这边是用showModel来控制，默认给它false，当点击规则按钮是将showModel的值改为true，点击关闭按钮将showModel的值改为false
小程序前端代码（这是触发按钮）
小程序前端代码（这是模态框），内含关闭按钮(这里是给text一个点击事件当做关闭按钮)
× 活动规则 活动时间 : {{activity_time}} 活动说明 : {{activity_rule}}
js
data: {
showModal: false,
},
onLoad: function (options) {
var that = this;
//活动规则
wx.request({
url: app.d.hostUrl + 'activity.activityConf', //此处是你的接口
data: {
},
success: function (res) {
//console.log(res.data); //接口中拿到的数据
var activity_time = res.data.activity_time;
var activity_rule = res.data.activity_rule;
//规则数据显示
that.setData({
activity_time: activity_time,
activity_rule: activity_rule,
});
}
})
},
// 活动详细规则
openrule: function () {
this.setData({ //打开规则模块
showModal: true
});
},
closerule: function () {
this.setData({ //关闭规则模块
showModal: false
});
},
样式（样式中为了美观加了弹出动画，可直接使用）：
/* 覆盖button样式 */
button.form_button{
background-color:transparent;
padding:0;
margin:0;
display:inline;
position:static;
border:0;
padding-left:0;
padding-right:0;
border-radius:0;
/* font-size:0rpx; */
color:transparent;
}
button.form_button::after{
content:'';
width:0;
height:0;
-webkit-transform:scale(1);
transform:scale(1);
display:none;
background-color:transparent;
}
.tip-content-dialog{
position: fixed;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
z-index: 99999;
}
.tip-content-dialog .tip-dialog-view{
width: 80%;
margin: auto;
border-radius: 25rpx;
vertical-align: middle;
animation: tanchu 400ms ease-in;
/* overflow: hidden; */
padding: 20rpx;
}
.tip-content-dialog .btn{
background: #f2f7fa;
}
@keyframes tanchu{
from{
transform: scale(0,0);
-webkit-transform: scale(0,0);
}
to{
transform: scale(1,1);
-webkit-transform: scale(1,1);
}
}
.tip-content-dialog .dialogClose{
position: absolute;
right:20rpx;
top: 10rpx;
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。