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


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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
小程序实现筛子抽奖
May 26 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
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
Python sys.argv用法实例
2015/05/28 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技