Understand the most basic container in the mini program-view container [with code]

WeChat applet-view container: It is the most basic container in the applet, which can realize the division of page structure, adjustment of page layout, etc. In addition to the public attributes, there are 4 attributes.

I wrote a piece of code below. It would be better to explain the effect by expressing it. I hope I can copy it to your WeChat compiler and run it to check it out.

Here hover-class refers to what style it will become when we click, hover-start-time refers to how long it will take before we click. The style of hover-class, hover-stay-time refers to how long this style will last. The explanation of hover-stop-propagation is troublesome, so I wrote a piece of code. It will be better to explain it through the effect. I hope I can copy it to your WeChat Run the compiler to see.

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;
}

data part of index.js

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

Normal situation Next, when we click on any innermost box, the rest will change. When it comes to the middle box, the outermost one will also change. Because of the scope, because the innermost box is included in the middle and outer boxes, The middle one is contained in the outer box. If we want to prevent this effect, we need to use hover-stop-propagation. The literal meaning of propagation is to spread, and the meaning of hover-stop-propagation is, in layman's terms, to prevent the effect from spreading.

Related recommendations:

PHP Graphing Calculator

Video Tutorial: View Container Component-Geek Academy WeChat Mini Program from Basics to Actual combat

The above is the detailed content of Understand the most basic container in the mini program-view container [with code]. For more information, please follow other related articles on the PHP Chinese website!