when using Mini Program"s modal component to achieve the mask layer effect, there will be the problem of scrolling through, that is, the page behind the mask layer can still scroll, is there a solution to this problem?
when using Mini Program"s modal component to achieve the mask layer effect, there will be the problem of scrolling through, that is, the page behind the mask layer can still scroll, is there a solution to this problem?
my solution is:
add catchtouchmove events to block
<view wx:if="{{alert}}" catchtouchmove="myCatchTouch">
<template is="alert" data="{{alertData}}" />
</view> myCatchTouch: function () {
console.log('stop user scroll it!');
return;
},if there is no scrolling event in the pop-up layer, add catchtouchmove= "move" move:function () {};
directly to the mask.if there is a scrolling event in the pop-up layer, add a class to the bottom containerView when the pop-up layer appears and remove it when it disappears.
< view class= "{{showSearchView?'tripList_root':''}}" >
.tripList _ root {
top:0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
z-index: 0;
}
pop-up window appears
height: 100vh;
overflow: hidden; there are two ways: when a mask layer appears, have your
content {overflow:hidden} remove this property when the mask layer disappears
2: this is a more thorough method. When the pop-up window appears, add fixed positioning
body {
position:fixed;
top:0;left:0;right:0;bottom:0;
}
this way of writing only tells you the train of thought, but it is not realized by vue. You can write two class and then change the class value according to whether the pop-up window has a trigger selector.
add the class hiddenScroll to your background container when the mask is on, then remove it after the mask is closed
.hiddenScroll{
overflow:hidden;
}tell me the train of thought, the approximate code to achieve this is:
<!--wxml-->
<view class="mask" wx:if="{{hasMask}}">
</view>
<view class="content" style="{{hasMask?'height:100%;overflow:hidden':''}}">
</view>
<!-- js -->
Page{
...
showMask(e){
//
this.setData({
hasMask:true
})
},
hideMask(e){
//
this.setData({
hasMask:false
})
},
}feels like a pit. At least I didn't find a way to change the style in < page >. Unless you are not scrolling in < page >.
add a class overflow: hidden style to the tag of the page content when the mask pops up, and remove class when unmasking
https://www.cnblogs.com/apgy/...
is easy to use
add a touchmove event to the element of the mask layer, which is used to prevent event bubbling. The code in preventD is as follows:
preventD () {}
the problem is solved
page{
height:100%;
.hiddenScroll {
height:100%;
overflow: hidden;
}
}outermost view
<view class="{{ modalHidden ? '' : 'hiddenScroll' }}">
refer to this article. https://developers.weixin.qq....
first stops the touch event from bubbling during the scrolling of the pop-up layer, and then writes the scrolling of the pop-up layer into the scroll-view component instead of writing in the form of view and overflow-y:scroll, and sets the y-axis scrolling. Trust me if you have any questions
move(e) {
console.log(e);
}recently, we are going to do a leave function. Student A submitted an application for leave, which was then reviewed by teacher B, but later I found that I needed a reminder function on Wechat s message end. It seems that Wechat can only use template me...
do you want to know whether Mini Program and Mini Program, whose users enter from a specific channel, have such a function or method ...
the text matched by the search box above an article is highlighted to realize the idea. ...
The component of navigator has a limit on the number of jumps. I now have a project tabbar to write by myself, so it is inevitable to add navigator jump to it, but if there are too many pages to jump, there will be a jump limit. ...
for example, the details page, after sharing, other people open, can only see this page, I did not find a useful way to set API back to a route. You have to write it on the page? ...
RT how does Mini Program realize the friend-to-friend mode? the back end is php. looking for onlookers to fight. How are these two modes realized? What is the principle? ask the hero for advice. This is the first time to do this ....
Custom component life cycle res.height sometimes reports to null ready: function () { var that = this var query = wx.createSelectorQuery().in(this) query.select( .question ).boundingClientRect(function (res) { that.setData({ questionHeight: re...
for example, if you are editing on another page, you may just change the css style, be refreshed and jump to the front page, and then have to reopen the edit page. It is troublesome to get used to using Wechat developer tools on ctrl+s,. Is my configurat...
...
The problem with is that the return has neither error nor data, and the document says it will return binary and convert it to a picture. But now there is nothing. I don t know what went wrong. Ask for help contorller function getIssueQrcodeAction() ...
WeChat Mini Programs shopping cart requests shopping cart data in the app.js, and this.carts = app.globalData.carts in the onLoad on the shopping cart page (cart.wxml). on the shopping cart page, there are often operations to select, delete, and modif...
this is the data of setData , how can I render normally? ...
I just got in touch with Mini Program developer and recently encountered this problem when I wrote the demo, of a music player. After I returned to the list page from the playback page (or to the home page), I entered the playback page from the entrance...
WeChat Mini Programs s picture is saved to the photo album, api wx.saveImageToPhotosAlbum, which runs normally on the simulator and can be saved, but the error { "errMsg ": "saveImageToPhotosAlbum:fail file not exists "} is displayed in the real machi...
300 yuan was paid during the audit, and now it is about to expire. I don t know if I want to renew it. There is no text message or email notification, I am afraid that I will not be able to go on it one day. ...
I want to implement Mini Program s pull-up and load , but after using scroll-view, one line becomes one. Whether to set this or need to css, for a great solution ...
when wx.previewImage implements previewing pictures, long press can bring up options menu. If you want to add a text prompt to the user, you can bring up this menu by long pressing. How to realize ?...
how to get the parameters of Aladdin s QR code sharing in Mini Program app.js, be sure to get before login operation....
do I want to send openid+ data to the server and write to the database? ...
I built a new Mini Program on my work computer and uploaded it to Tencent Cloud. When I got home, I wanted to download the client and server folders and continue to write. How can I download it? Thank you! ...