uniapp scroll-view用法[下拉刷新,触底事件等等...](4)
前言:可滚动视图区域。用于区域滚动
话不多说 直接上官网属性 官网示例
讲一下常用的几个
@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>