Verstehen Sie den grundlegendsten Container im Mini-Programmansichtscontainer [mit Code]

WeChat Mini-Programm – Container anzeigen: Dies ist der grundlegendste Container im Miniprogramm, der die Aufteilung der Seitenstruktur, die Anpassung des Seitenlayouts usw. realisieren kann. Zusätzlich zu den öffentlichen Attributen gibt es 4 Attribute.

Ich habe unten einen Code geschrieben. Ich hoffe, ich kann ihn in Ihren WeChat-Compiler kopieren und zur Überprüfung ausführen.

Hier bezieht sich die Hover-Klasse darauf, welchen Stil sie annimmt, wenn wir klicken, und die Hover-Startzeit bezieht sich darauf, wie lange es dauert, bis wir klicken Hover-Klasse, Hover-Stay-Time bezieht sich darauf, wie lange dieser Stil anhält. Die Erklärung der Hover-Stop-Propagation ist mühsam, daher hoffe ich, dass es besser ist, sie durch den Effekt zu erklären Ich kann es auf Ihren WeChat kopieren. Führen Sie den Compiler aus, um es anzuzeigen.

index.wxml

<view class="container">
    <view  class=&#39;outBlock&#39; hover-class=&#39;outBlockHover&#39; hover-start-time=&#39;{{outStart}}&#39; hover-stop-propagation=&#39;true&#39; hover-stay-time=&#39;10000&#39;>
       <view  class=&#39;midBlock&#39; hover-class=&#39;midBlockHover&#39; hover-start-time=&#39;{{midStart}}&#39; hover-stop-propagation=&#39;true&#39;>
            <view class=&#39;inBlock&#39; hover-class=&#39;inBlockHover&#39; hover-start-time=&#39;{{inStart}}&#39; hover-stop-propagation=&#39;true&#39;>
                      
            </view>
       </view>
    </view>
</view>

index.wxss

.outBlock
{
  border:1rpx solid black;
  width: 1000rpx;
  height: 500rpx;
  background-color:aqua;
}
.midBlock
{
  border: 1rpx solid black;
  width:500rpx;
  height: 300rpx;
  margin: 100rpx;
  background-color: gray;
}
.inBlock
{
  border: 1rpx solid black;
  width: 300rpx;
  height: 200rpx;
  margin: 50rpx;
  background-color: blueviolet;
}
.outBlockHover
{
  background-color: black;
}
.midBlockHover
{
 background-color: darkblue;
}
.inBlockHover
{
  background-color: darkgreen;
}

Datenteil von index.js

 data: {
       outStart:1000,
       midStart:2000,
       inStart:3000
  },

Normale Situation Wenn wir als nächstes auf ein innerstes Kästchen klicken, ändert sich auch das äußerste Kästchen. Aufgrund des Umfangs, da das innerste Kästchen im mittleren und äußeren Kästchen enthalten ist Eine davon befindet sich im Umkarton. Wenn wir diesen Effekt verhindern wollen, müssen wir Hover-Stop-Propagation verwenden. Die wörtliche Bedeutung von Ausbreitung besteht darin, sich auszubreiten, und die Bedeutung von Hover-Stop-Ausbreitung besteht, um es für den Laien auszudrücken, darin, die Ausbreitung des Effekts zu verhindern.

Verwandte Empfehlungen:

PHP-Grafikrechner

Video-Tutorial: View Container Component-Geek Academy WeChat Mini-Programm von den Grundlagen bis zum tatsächlichen Kampf

Das obige ist der detaillierte Inhalt vonVerstehen Sie den grundlegendsten Container im Mini-Programmansichtscontainer [mit Code]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!