微信小程序自定义弹出模态框禁止底部滚动功能


Posted in Javascript onMarch 09, 2020

图示:

微信小程序自定义弹出模态框禁止底部滚动功能

wxml代码:

<view class='fix_bottom'>
<view>分享</view>
<view>电话咨询</view>
<view class='active' bindtap="showDialogBtn">立即报名</view>
</view>

<!--模态框-->
<!-- 遮罩层 -->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modal-dialog" wx:if="{{showModal}}">
<view class="modal-title">选择班次</view>
<view class="modal-content">
<view class="concent_list {{curindex==index? 'active':''}}" wx:for="{{concent_list}}" wx:for-index='index' data-index='{{index}}' bindtap='choose' data-name='{{item}}'>{{item}}</view>
</view>

<view class="modal-footer">
<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
</view>
</view>

wxss代码

.fix_bottom{
width: 100%;
height: 120rpx;
background: #fff;
position: fixed;
bottom: 0;
border-top: 1px solid #ccc;
display: flex;
}

.fix_bottom view{
width: 33.333%;
border-left: 1px solid #ccc;
line-height: 120rpx;
text-align: center;
font-size: 40rpx;
font-weight: bold;
}

.active{
color:#ffffff;
background: -moz-linear-gradient(left, #ff7b68, #ff5462);
 /* Safari 4-5, Chrome 1-9 */
 /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
 background: -webkit-gradient(linear,left,from(#ff7b68),to(#ff5462));
 /* Safari 5.1+, Chrome 10+ */
 background: -webkit-linear-gradient(left, #ff7b68, #ff5462);
 /* Opera 11.10+ */
 background: -o-linear-gradient(left, #ff7b68, #ff5462);
}

/* 模态框 */

.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}

.modal-dialog {
width: 540rpx;
overflow: hidden;
position: fixed;
top: 40%;
left: 0;
z-index: 9999;
background: #f9f9f9;
margin: -180rpx 105rpx;
border-radius: 36rpx;
}

.modal-title {
height: 100rpx;
line-height: 100rpx;
font-size: 36rpx;
color: #fff;
text-align: center;
background: -moz-linear-gradient(left, #ff7b68, #ff5462);
 /* Safari 4-5, Chrome 1-9 */
 /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
 background: -webkit-gradient(linear,left,from(#ff7b68),to(#ff5462));
 /* Safari 5.1+, Chrome 10+ */
 background: -webkit-linear-gradient(left, #ff7b68, #ff5462);
 /* Opera 11.10+ */
 background: -o-linear-gradient(left, #ff7b68, #ff5462);
border-bottom: 1px solid #ccc;

}

.modal-content {

}

.concent_list{
width: 100%;
height: 100rpx;
border-bottom: 1px solid #ccc;
line-height: 100rpx;
text-align: center;
}

.modal-footer {
display: flex;
flex-direction: row;
height: 86rpx;
font-size: 34rpx;
line-height: 86rpx;
}

.btn-cancel {
width: 50%;
color: #666;
text-align: center;
border-right: 1px solid #dedede;
}

.btn-confirm {
width: 50%;
color: #ec5300;
text-align: center;
}

js代码

var value='小学升初中'
Page({

/**
* 页面的初始数据
*/
data: {
showModal: false,
concent_list:['小学升初中','初一升初二','初二升初三','初中升高中'],
curindex:-1
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},

/**
* 弹窗
*/
showDialogBtn: function () {
this.setData({
showModal: true
})
},

/**
* 隐藏模态对话框
*/
hideModal: function () {
this.setData({
showModal: false
});
},

/**
* 对话框取消按钮点击事件
*/
onCancel: function () {
this.hideModal();
},
/**
* 对话框确认按钮点击事件
*/
onConfirm: function () {
this.hideModal();

})
},

choose:function(e){
var index=e.currentTarget.dataset.index
value = e.currentTarget.dataset.name
console.log(value)
this.setData({
curindex:index
})
}

})

模态框显示时禁止底部内容滚动可以在弹出时给底部包裹部分加上固定定位,模态框隐藏时取消固定定位

内容包裹的元素需要设置100%的宽度

<view class='diceng_wrap' style='position: {{position}}'>
底部所有内容内容内容
</view>

data数据的变化:

初始化时:

 position: 'auto',

模态框显示时:

position: 'fixed',

模态框隐藏时:

position: 'auto',

模态框显示时

总结

到此这篇关于微信小程序自定义弹出模态框禁止底部滚动功能的文章就介绍到这了,更多相关微信小程序弹出模态框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
javascript操作数组详解
Dec 17 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 #Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 #Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 #Javascript
JavaScript中的this基本问题实例小结
Mar 09 #Javascript
Nuxt页面级缓存的实现
Mar 09 #Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
js生成随机数的过程解析
2015/11/24 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
js实现自定义路由
2017/02/04 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
js制作提示框插件
2020/12/24 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python列表切片用法示例
2017/04/19 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
面试后感谢信怎么写
2014/02/01 职场文书
环卫个人总结
2015/03/03 职场文书
培训督导岗位职责
2015/04/10 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
MySQL分区表管理命令汇总
2022/03/21 MySQL
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android