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


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 相关文章推荐
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
原生js实现日期联动
Jan 12 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
微信小程序实战之自定义toast(6)
Apr 18 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
html中创建并调用vue组件的几种方法汇总
Nov 17 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 object转数组示例
2014/01/15 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php实现搜索类封装示例
2016/03/31 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
一个网马的tips实现分析
2010/11/28 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python栈类实例分析
2015/06/15 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
用Python shell简化开发
2018/08/08 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python numpy数组复制使用实例解析
2020/01/10 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
写自荐信要注意什么
2013/12/26 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
保研推荐信格式
2015/03/25 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
go类型转换及与C的类型转换方式
2021/05/05 Golang
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript