微信小程序自定义弹窗滚动与页面滚动冲突的解决方法


Posted in Javascript onJuly 16, 2019

本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,供大家参考,具体内容如下

先看效果是否是自己需要的

微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

实现步骤:

1.整个布局用作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性
2.样式文件中设置Page的overflow-y属性值为hidden
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true

JS:

Page({
 /**
  * 页面的初始数据
  */
 data: {
  arrayData: null,
  dialogData: null,
  isDialogShow: false,
  isScroll: true
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  //构建测试数据
  let data = new Array();
  let dialog = new Array();
  for (let i = 0; i < 25; i++) {
   data[i] = '我是测试-----------' + i;
   dialog[i] = {
    name: '我是弹窗-' + i,
    isSelected: false
   };
  }
  this.setData({
   arrayData: data,
   dialogData: dialog
  });
 },
 /**
  * 显示、关闭弹窗
  */
 showDialog: function (e) {
  var currentStatu = e.currentTarget.dataset.statu;
  console.log('currentStatu:', currentStatu);
  //关闭 
  if (currentStatu == "close") {
   this.setData({
    isDialogShow: false,
    isScroll: true
   });
  }
  // 显示 
  if (currentStatu == "open") {
   this.setData({
    isDialogShow: true,
    isScroll: false
   });
  }
 }
})

wxml:

<button>做点什么</button>
<scroll-view scroll-y="{{isScroll}}"> 
 <view class="rootView">
  <view class="inTable">
   <view wx:for="{{arrayData}}" wx:key="" class="unitItemLeft" bindtap="showDialog" data-statu="open">
    <input class="baseItemWithBorder" value="{{item}}" disabled />
   </view>
  </view>
 </view>
</scroll-view>


<!--测试弹窗--> 
<view class="dialogMarsk" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"></view> 
 <!--dialog-->
<view class="dialog" wx:if="{{isDialogShow}}">
 <view class="appreciationTitle">
  <text style="font-size:24px;">我是弹窗</text>
 </view>
 <view wx:for="{{dialogData}}" class="appreciationTable">
  <view class="unitItemLeft">
   <text class="baseItemWithBorder">{{item.name}}</text>
  </view>
 </view>
</view>

wxss:

Page {
 position: absolute;
 font-size: 36rpx;
 width: 100%;
 height: 100%;
 display: block;
 background: #FAFAFA;
 overflow-y: hidden;
}
 scroll-view {
 height: 100%;
} 
.rootView{
 /* width: 100%; */
 padding: 10rpx;
 display: flex;
 flex-direction: column;
}
.baseItemWithBorder{
 flex-grow: 1;
 height: 100%;
 padding-left: 20rpx;
 padding-right: 20rpx;
 border-bottom: solid 1rpx gainsboro;
}
.inTable{
 width: 100%;
 display: flex;
 box-shadow:5px 5px 10px gray;
 flex-direction: column;
 margin-top: 40rpx;
 background: white;
}
.inDetail{
 width: 100%;
 height: 80rpx;
 display: flex;
}
.unitLeft{
 justify-content: flex-start;
 padding-left: 20rpx;
}
.unitItemLeft{
 width: 100%;
 height: 80rpx;
 display: flex;
 flex-direction: row;
}
.dialogMarsk { 
 width: 100%; 
 height: 100%; 
 position: fixed; 
 top: 0; 
 left: 0; 
 z-index: 1000; 
 background: rgba(0, 0, 0, 0.6);
 overflow: hidden; 
}
.dialog {
 width: 80%;
 height: 50%; 
 position: fixed; 
 top: 10%;
 z-index: 1001; 
 background: #FAFAFA;
 border-radius: 3px;
 overflow-y: scroll;
}
.appreciationTable{
 width: 98%;
 display: flex;
 flex-direction: column;
 background: white;
 margin: 0 10rpx;
}
.appreciationTitle{
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin-top: 20rpx;
 margin-bottom: 20rpx;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 #Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 #Javascript
微信小程序-API接口安全详解
Jul 16 #Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JavaScript解析JSON数据示例
Jul 16 #Javascript
微信小程序 Storage更新详解
Jul 16 #Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
Javascript MD4
2006/12/20 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
小学新学期教师寄语
2014/01/18 职场文书
作弊检讨书1000字
2014/02/01 职场文书
倡议书作文
2015/01/19 职场文书
工作证明格式范文
2015/06/15 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python