미니 프로그램-뷰 컨테이너 [코드 포함]에서 가장 기본적인 컨테이너 이해

위챗 미니 프로그램 - 뷰 컨테이너: 미니 프로그램의 가장 기본적인 컨테이너로, 페이지 구조 분할, 페이지 레이아웃 조정 등을 구현할 수 있습니다. 공개 속성 외에 4가지 속성이 있습니다.

아래에 코드를 작성해서 표현해 보시는게 좋을 것 같습니다. 위챗 컴파일러에 복사해서 실행해서 확인해보시면 좋을 것 같습니다.

여기서 hover-class는 클릭할 때 어떤 스타일이 될지 나타내며, hover-start-time은 hover-class 스타일을 표시하기 위해 클릭하기까지 걸리는 시간을 나타냅니다. hover-stay-Time hover-stop-propagation을 설명하는 것이 번거로워서 효과를 통해 설명하는 것이 더 좋을 것 같습니다. 실행해서 확인해보세요.

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

index.js의 데이터 부분

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

일반적으로 가장 안쪽 상자를 클릭하면 나머지 상자가 변경되고 가운데 상자가 가장 바깥쪽 상자가 됩니다. 가장 안쪽 상자는 가운데 상자에 포함되고, 바깥쪽 상자는 그 안에 있고, 가운데 상자는 바깥쪽 상자에 포함되어 있기 때문에 범위 때문에도 변경됩니다. 이 효과를 방지하려면 hover-stop-propagation을 사용해야 합니다. 전파의 문자 그대로의 의미는 확산되는 것이며, hover-stop-propagation의 의미는 일반인의 관점에서 효과가 확산되는 것을 방지하는 것입니다.

관련 권장 사항:

PHP 그래프 계산기

동영상 튜토리얼: 컨테이너 구성요소 보기-Geek Academy WeChat Mini 프로그램 기초부터 실습까지

위 내용은 미니 프로그램-뷰 컨테이너 [코드 포함]에서 가장 기본적인 컨테이너 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!