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


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 相关文章推荐
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
小程序云开发之用户注册登录
May 18 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JavaScript的function函数详细介绍
Nov 20 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学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python 类详解及简单实例
2017/03/24 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python科学画图代码分享
2017/11/29 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
校长岗位职责
2013/11/26 职场文书
部队万能检讨书
2014/02/20 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2014年医务科工作总结
2014/12/18 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers