Home  >  Article  >  WeChat Applet  >  Understand the most basic container in the mini program-view container [with code]

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

php是最好的语言
php是最好的语言Original
2018-07-25 09:39:273051browse

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.

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

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

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn