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


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 相关文章推荐
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
Vue常用指令详解分析
Aug 19 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
晶体管来复再生式二管收音机
2021/03/02 无线电
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python GUI编程完整示例
2019/04/04 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
pandas如何处理缺失值
2019/07/31 Python
Django 解决由save方法引发的错误
2020/05/21 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
办理信用卡工作证明
2014/01/11 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
用电申请报告范文
2015/05/18 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
golang使用map实现去除重复数组
2022/04/14 Golang