前言:可滚动视图区域。用于区域滚动
话不多说 直接上官网属性 官网示例
讲一下常用的几个
@scroll 滚动时触发
@scrolltoupper 滚动到顶部或左边，会触发 scrolltoupper 事件
@scrolltolower 滚动到底部或右边，会触发 scrolltolower 事件
1.纵向滚动
设置scroll-y=”true” 开启纵向滚动功能
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>2.横向滚动
设置scroll-x=”true” 开启横向滚动功能
<view>
<scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y"
@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>注意：scroll-view本身的display:flex不生效、如果想实现display：flex功能，则可以给scroll-view加上white-space: nowrap，给内容容器加上display:inline-block
3.触底事件
@scrolltolower 滚动到底部或右边，会触发 scrolltolower 事件
<template>
<view>
<scroll-view scroll-y="true" style="height: 500rpx;" @scrolltolower="onReachScollBottom">
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
onReachScollBottom(){
uni.showToast({
title:"触发了触底事件",
duration:1500,
icon:"none"
})
}
}
}
</script>
<style>
</style>4.下拉刷新
refresher-enabled = “true” 开启自定义下拉刷新
refresher-triggered =”true” 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下 拉刷新未被触发
@refresherrefresh 自定义下拉刷新被触发
<template>
<view>
<scroll-view scroll-y="true" style="height: 500rpx;" refresher-enabled="true" :refresher-triggered="refresh" @refresherrefresh="onRefresh">
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
colorList:["blue","red","yellow"],
refresh: false
}
},
methods: {
onRefresh() {
this.refresh= true;
uni.showToast({
title:"触发了下拉刷新",
duration:1500,
icon:"none"
})
// 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况
setTimeout(() => {
this.refresh = false;
}, 500)
}
}
}
</script>
原文地址:https://blog.csdn.net/m0_65607651/article/details/135827735
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_61865.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
