Heim > WeChat-Applet > Mini-Programmentwicklung > Einführung in zwei Methoden zum Deaktivieren des Scrollens des zugrunde liegenden Inhalts, wenn ein Miniprogramm ein Popup-Fenster anzeigt.

Einführung in zwei Methoden zum Deaktivieren des Scrollens des zugrunde liegenden Inhalts, wenn ein Miniprogramm ein Popup-Fenster anzeigt.

不言
Freigeben: 2019-03-20 11:48:51
nach vorne
4229 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in zwei Methoden zum Deaktivieren des Scrollens von Inhalten auf niedrigerer Ebene, wenn ein Miniprogramm einen bestimmten Referenzwert hat Ich hoffe, es wird Ihnen helfen.

① Der erste Weg
Seitenscrollen deaktivieren.

1. Seitenstruktur html

<view class="indexPage {{proInfoWindow?&#39;indexFixed&#39;:&#39;&#39;}}">
-----------此处为整个页面的结构内容
<button catchTap="_proInfoWindowShow">点击显示弹窗</button>
</view>
// 当proInfoWindow为true的时候显示弹窗
<view wx:if="{{proInfoWindow}}">此处为弹窗内容</view>
Nach dem Login kopieren

3. JS-Teil

//添加一个类名, 把弹窗的下层内容定位为fixed.实现禁止滚动的效果
.indexFixed{
  position: fixed;
  top:0;//top:0可不写,否则显示弹窗的同时会使底层滚动到顶部.
  left:0;
  bottom:0;
  right:0;
}
Nach dem Login kopieren

②Der zweite Weg

Page({
 data: {
proInfoWindow:false,//控制弹窗是否显示  
},
// 点击弹窗事件, 设置proInfoWindow为true, 显示弹窗.
// 设置proInfoWindow为true的同时, 给页面添加了一个class名为indexFixed的类.显示弹窗时下层就禁止滚动,关掉弹窗时就可以滚动.
_proInfoWindowShow(){
  this.setData({
    proInfoWindow:true
})
}
})
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in zwei Methoden zum Deaktivieren des Scrollens des zugrunde liegenden Inhalts, wenn ein Miniprogramm ein Popup-Fenster anzeigt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage