用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序--获取屏幕宽度及弹窗滚动与页面滚动冲突

Rolan 2017-12-2 00:17

1.获取屏幕宽度,并赋值给viewwx.getSystemInfo({ success: function (res) { // console.log(res.windowWidth) 屏幕宽度 that.setData({ windowWidth: res.windowWidth }) } }) 2.最近遇到自定义弹窗滚动问题,当文 ...

1.获取屏幕宽度,并赋值给view

wx.getSystemInfo({
success: function (res) {
// console.log(res.windowWidth) 屏幕宽度
that.setData({
windowWidth: res.windowWidth
})
}
})

2.最近遇到自定义弹窗滚动问题,当文本页面过长,同时自定义弹窗也过长,即两者都需要滚动的时候,想要自定义弹窗滚动却触发的是页面的滚动。

解决思路:在打开弹窗的时候,让页面不可滚动;关闭弹窗后,恢复页面滚动。

<scroll-view scroll-y="{{isScroll}}"> 
<view class="rootView">
<view wx:for="{{arrayData}}" wx:key="" bindtap="showDialog" data-statu="open" class="inBoxVIew">
<text>{{item}}</text>
</view>
<!--测试弹窗-->
<view class="dialogbox" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"></view>
<!--dialog-->
<view class="dialog" wx:if="{{isDialogShow}}">
<view class="windowTitle">
<text style="font-size:24px;">我是弹窗</text>
</view>
<view wx:for="{{dialogData}}" class="windowTable">
<text>{{item.name}}</text>
</view>
</view>
</view>
</scroll-view>
复制代码
复制代码
Page {
position: absolute;
font-size: 36rpx;
width: 100%;
height: 100%;
display: block;
background: #fff;
}
scroll-view {
height: 100%;
}
.rootView{
padding: 10rpx;
}
.inBoxVIew{
padding:20rpx 0;
text-align: center;
}
.dialogbox {
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:50%;
left:50%;
margin-top:-25%;
margin-left:-40%;
z-index: 1001;
background: #FAFAFA;
border-radius: 3px;
overflow-y: scroll;
}
.windowTable{
width: 98%;
background: white;
margin: 0 10rpx;
padding:10rpx 0;
}
.windowTitle{
width: 100%;
text-align: center;
}
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") {
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 童话里都是骗人的 来自: cnblogs

相关阅读