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


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 Array数组对象的扩展函数代码
May 22 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
JavaScript 的继承
Oct 01 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
vue实现div单选多选功能
2020/07/16 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
python集合类型用法分析
2015/04/08 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python的concat等多种用法详解
2018/11/28 Python
对Python信号处理模块signal详解
2019/01/09 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
刚毕业大学生自荐信范文
2014/02/20 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2015新年寄语大全
2014/12/08 职场文书
母亲去世追悼词
2015/06/23 职场文书
《所见》教学反思
2016/02/23 职场文书