微信小程序自定义可滚动的弹出框微信小程序自定义可滚动的弹

本文实例为大家分享了微信小程序自定义可滚动弹出框的具体代码，供大家参考，具体内容如下
最近在写一个装修的活动，规则是点击按钮弹出加上相应的动画。
首先我们需要一个按钮触发显示（如图，点击详细规则显示规则模态框，图二右边的滚动条在手机上不显示）

文章图片

文章图片

思路：小程序自己的模态框不能写样式，这是个比较尴尬的情况，这是一个比较小白的解决方案：
在前端写一个视窗，默认让它隐藏
【微信小程序自定义可滚动的弹出框】我这边是用showModel来控制，默认给它false，当点击规则按钮是将showModel的值改为true，点击关闭按钮将showModel的值改为false
小程序前端代码（这是触发按钮）

小程序前端代码（这是模态框），内含关闭按钮(这里是给text一个点击事件当做关闭按钮)

×活动规则活动时间 :{{activity_time}}活动说明 :{{activity_rule}}

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; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。