微信小程序_(組件)view視圖容器

 

 

　　微信小程序view組件官方文檔　　傳送門

　　

　　

　　Learn

　　　　1、hover-class屬性

　　　　2、hover-start-time與hover-stay-time屬性

　　　　3、hover-stop-propagation屬性

　　

 

1、hover-class屬性

　　hover-class：指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果【默認值none】

　　定義.a的class顏色爲紅色，定義.d的class爲綠色，當鼠標點擊時紅色區域變成綠色區域，當鼠標離開時，綠色區域又變回紅色區域

 background: red; order:1; flex:10;
} .d{ background: green; order:4; flex:1;
}

 

 

<!--index.wxml--> Cynical丶Gary <view class="container">
  
  <view class='a size' hover-class='d'>a</view>

</view>

index.wxml

 

.container{ display: flex;

} .size{ width: 100rpx; height: 150rpx;
} .a{ background: red; order:1; flex:10;
} .b{ background: yellow; order:2; flex:2;
} .c{ background: blue; order:3; flex:1;
} .d{ background: green; order:4; flex:1;
} .e{ background: orange; order:5; flex:1;
}

index.wxss

 

 

2、hover-start-time與hover-stay-time屬性

　　hover-start-time：按住後多久出現點擊態，單位毫秒【默認值50毫秒】

　　hover-stay-time：手指鬆開後點擊態保留時間，單位毫秒【默認值400毫秒】

　　添加hover-start-time='1000' hover-stay-time='2000'兩個屬性，當手指按下1s後class樣式由.a改變爲.d，手指鬆開2s後class樣式由d改變回a

 

<!--index.wxml--> Cynical丶Gary <view class="container">
  
  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a -->
  <view class='a size' hover-class='d' hover-start-time='1000' hover-stay-time='2000'>a</view>

</view>

index.wxml

 

.container{ display: flex;

} .size{ width: 100rpx; height: 150rpx;
} .a{ background: red; order:1; flex:10;
} .b{ background: yellow; order:2; flex:2;
} .c{ background: blue; order:3; flex:1;
} .d{ background: green; order:4; flex:1;
} .e{ background: orange; order:5; flex:1;
}

index.wxss

 

 

3、hover-stop-propagation屬性

　　hover-stop-propagation：指定是否阻止本節點的祖先節點出現點擊態【默認值false】

　　hover-stop-propagation和JavaScript中的冒泡事件很像

　　JavaSciprt事件中有兩個很重要的特性：事件冒泡以及目標元素。

　　事件冒泡: 當一個元素上的事件被觸發的時候，好比說鼠標點擊了一個按鈕，一樣的事件將會在那個元素的全部祖先元素中被觸發。這 一過程被稱爲事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。

　　目標元素: 任何一個事件的目標元素都是最開始的那個元素，在咱們的這個例子中也就是按鈕，而且它在咱們的元素對象中以屬性的形 式出現。使用事件代理的話咱們能夠把事件處理器添加到一個元素上，等待一個事件從它的子級元素裏冒泡上來，而且能夠很方便地得知這個事件是從哪一個元素開始 的。

　　事件的冒泡和捕獲

　　捕獲是從上級元素到下級元素，冒泡是從下級元素到上級元素.

 

　　使用方法

<view class='a size' hover-class='d' hover-start-time='1000' hover-stay-time='2000' hover-stop-propagation='true'>a</view>

 

<!--index.wxml--> Cynical丶Gary <view class="container">
  
  <!-- 手指按下後1s樣式由a改變爲d，手指鬆開後2s樣式由d改變回a -->
  <view class='a size' hover-class='d' hover-start-time='1000' hover-stay-time='2000' hover-stop-propagation='true'>a</view>

</view>

index.wxml

 

.container{ display: flex;

} .size{ width: 100rpx; height: 150rpx;
} .a{ background: red; order:1; flex:10;
} .b{ background: yellow; order:2; flex:2;
} .c{ background: blue; order:3; flex:1;
} .d{ background: green; order:4; flex:1;
} .e{ background: orange; order:5; flex:1;
}

index.wxss