奇怪的uniapp1

视图容器

一、view

1.hover-class

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果。默认值为none。

.div1{ width: 200px; height: 200px; background-color: #F0AD4E;}
.div2{ width: 100px; height: 100px; background-color: #4CD964;}

点击该view，样式发生变化。类型：String

这里很奇怪的是：当你给子元素和父元素设置同一个hover-class时，点击son，father消失，son获得样式div1；点击father时，father消失，son样式不变。

2.hover-stop-propagation

阻止事件冒泡，指定是否阻止本节点的祖先节点出现点击态，遗憾的发现无论指定值为true或者false，或者0 或者 -1,亦或是什么都不指定 ，只要出现hover-stop-propagation他就阻止冒泡了。    类型：Boolean

3.hover-start-time

点击后多久出现点击态，单位毫秒。默认50，类型：number。

4.hover-stay-time

手指松开后点击态保留时间，单位毫秒。默认400，类型：number。

二、scroll-view(可滚动视图区域)

1.scroll-x

允许横向滚动,类型：Boolean，默认值：false

	1
	2
	3


.father{ display: flex; flex-wrap: nowrap; white-space: nowrap;}
.son{ width: 90%; height: 200px; margin: 0 auto; background-color: #007AFF; display: inline-block; margin: 0 5%;}

2.scroll-y

允许纵向滚动,类型：Boolean，默认值：false

	1
	2
	3



.father_y{ width: 100%; height: 200px; display: flex; flex-direction: row; background-color: #999999;}
.son_y{ width: 90%; height: 180px; margin: 0 auto; background-color: #4CD964; display: inline-block; margin: 10px 5%;}

需要注意的是在scroll-y中的父子元素的高度要固定值，不可以为百分比。

官方提示：使用竖向滚动时，需要给  一个固定高度，通过 css 设置 height。

3.upper-threshold

距顶部/左边多远时（单位px），触发 scrolltoupper 事件

			1
			2
			3
		

4.lower-threshold

距底部/右边多远时（单位px），触发 scrolltolower 事件

			1
			2
			3
		

5.scroll-top

设置竖向滚动条开始位置，不用加单位。

			1
			2
			3
		

6.scroll-left

设置横向滚动条开始位置，不用加单位。

			1
			2
			3
		

7.scroll-into-view

8.scroll-with-animation

9.enable-back-to-top

10.show-scrollbar

11.@scrolltoupper

滚动到顶部/左边，会触发 scrolltoupper 事件

			1
			2
			3

12.@scrolltolower

滚动到底部/右边，会触发 scrolltolower 事件

			1
			2
			3
		

13.@scroll

滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

给大家举个关于@scroll的例子

			1
			2
			3

返回顶部

点击button时，返回顶部

 

另外关于 7、8、9、10，这四点，我无法测试出效果。如果有大佬愿意指教的，麻烦评论区指点一波