奇怪的uniapp1

视图容器

一、view

1.hover-class

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

<view class="div1" hover-class="div2"></view>

.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样式不变。

<view class="div_father" hover-class="div1">
	<view class="div_son" hover-class="div1">
	</view>
</view>

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

<scroll-view class="father" scroll-x="true">
	<view class="son">1</view>
	<view class="son">2</view>
	<view class="son">3</view>
</scroll-view>

.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

<scroll-view class="father_y" scroll-y="true" >
	<view class="son_y">1</view>
	<view class="son_y">2</view>
	<view class="son_y">3</view>
</scroll-view>


.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中的父子元素的高度要固定值，不可以为百分比。

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

3.upper-threshold

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

<scroll-view class="father" scroll-x="true" upper-threshold="100" @scrolltoupper="upper">
			<view class="son">1</view>
			<view class="son">2</view>
			<view class="son">3</view>
		</scroll-view>

4.lower-threshold

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

<scroll-view class="father" scroll-y="true" lower-threshold="100" @scrolltolower="lower">
			<view class="son">1</view>
			<view class="son">2</view>
			<view class="son">3</view>
		</scroll-view>

5.scroll-top

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

<scroll-view class="father" scroll-y="true" scroll-top="0">
			<view class="son">1</view>
			<view class="son">2</view>
			<view class="son">3</view>
		</scroll-view>

6.scroll-left

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

<scroll-view class="father" scroll-x="true" scroll-left="0">
			<view class="son">1</view>
			<view class="son">2</view>
			<view class="son">3</view>
		</scroll-view>

7.scroll-into-view

8.scroll-with-animation

9.enable-back-to-top

10.show-scrollbar

11.@scrolltoupper

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

<scroll-view class="father" scroll-x="true" @scrolltoupper="upper">
			<view class="son">1</view>
			<view class="son">2</view>
			<view class="son">3</view>
</scroll-view>

12.@scrolltolower

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

<scroll-view class="father_y" scroll-y="true" @scrolltolower="lower">
			<view class="son_y">1</view>
			<view class="son_y">2</view>
			<view class="son_y">3</view>
		</scroll-view>

13.@scroll

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

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

<scroll-view class="father_y" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
			<view class="son_y">1</view>
			<view class="son_y">2</view>
			<view class="son_y">3</view>
</scroll-view>
<button type="primary" @tap="goTop">返回顶部</button>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
                     scroll: function(e) {
						this.old.scrollTop = e.detail.scrollTop
			        },
			        goTop: function(e) {
						console.log(this.scrollTop)
						this.scrollTop = this.old.scrollTop
						console.log(this.scrollTop)
						this.$nextTick(function() {
							this.scrollTop = 0
						});
						uni.showToast({
							icon:"none",
							title:"纵向滚动 scrollTop 值已被修改为 0"
						})
					}
		}
	}
</script>

<style>
	.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%;}
	
</style>

点击button时，返回顶部

 

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