微信小程序（6）--获取屏幕宽度及弹窗滚动与页面滚动冲突
2024-09-05 16:06:33
1.获取屏幕宽度，并赋值给view
<view class="ships-img" style="height:{{windowWidth}}px;"></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: %;
height: %;
display: block;
background: #fff;
}
scroll-view {
height: %;
}
.rootView{
padding: 10rpx;
}
.inBoxVIew{
padding:20rpx ;
text-align: center;
}
.dialogbox {
width: %;
height: %;
position: fixed;
top: ;
left: ;
z-index: ;
background: rgba(, , , 0.6);
overflow: hidden;
}
.dialog {
width: %;
height: %;
position: fixed;
top:%;
left:%;
margin-top:-%;
margin-left:-%;
z-index: ;
background: #FAFAFA;
border-radius: 3px;
overflow-y: scroll;
}
.windowTable{
width: %;
background: white;
margin: 10rpx;
padding:10rpx ;
}
.windowTitle{
width: %;
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 = ; i < ; 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
});
}
},
})
最新文章
- Tween公式 以及四个参数
- il c井
- angular中自定义依赖注入的方法和decorator修饰
- mac os x 10.10.3 安装protoc
- Foundation 5 发布！最先进的响应式前端框架
- IO的多路复用和信号驱动
- Longest Increasing Common Subsequence (LICS)
- OpenGl从零开始之坐标变换（上）
- webapp调试工具weinre的使用
- jquery 判断页面滚动到底部
- 使用SuperWebSocket 构建实时 Web 应用
- MAC随机修改批处理
- ubuntu系统中crontab的使用介绍
- 2.熟悉Java基本类库系列——Java IO 类库
- 微信浏览器的页面跳转及刷新的bug
- spring为什么推荐使用构造器注入？
- Golang 微框架 Gin 简介
- 人工智能必须要知道的语义分割模型：DeepLabv3+
- 在springboot中 使用jsp
- Charm Bracelet（01背包问题）