视图容器
一、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,这四点,我无法测试出效果。如果有大佬愿意指教的,麻烦评论区指点一波