自定义scroll-view 下拉及复位
来自:https://ask.dcloud.net.cn/question/176935
<template> <view class="action"> <scroll-view scroll-y :style="'height:'+listHeight+'px;'" @scrolltolower="getData" :lower-threshold="100" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"> <view class="list" v-for="(item,index) in list" :key="index"> <view>{{item}}这是列表</view> </view> </scroll-view> </view> </template> <script> export default { data() { return { scroll: { trigger: false }, list: 20, listHeight: uni.getSystemInfoSync().windowHeight, triggered: false, actived: false, } }, methods: { onRefresh() { console.log("自定义下拉刷新被触发"); let that = this; if (that.actived) { return; } that.actived = true; //界面下拉触发,triggered可能不是true,要设为true if (!that.triggered) { that.triggered = true; } this.getData(); }, onRestore() { console.log("自定义下拉刷新被复位"); this.triggered = false; this.actived = false; console.log("onRestore"); }, getData() { let that = this //这里是调用后台接口的方法数据 setTimeout(() => { this.triggered = false; //触发onRestore,并关闭刷新图标 this.actived = false; }, 1000) } } } </script> <style> .action { padding: 30rpx; } .list { padding: 30rpx 0; border-bottom: 1px solid #ddd; } </style>
- scroll-view uniapp scroll viewscroll-view uniapp scroll view 横向scroll-view uniapp scroll scroll-view组件 位置uniapp scroll-view uniapp scroll 2023 scroll-view scroll scroll-into-view view scroll-view scroll-view程序scroll view scroll scroll-view scroll-top顶部 源代码scroll-view更多scroll bindrefresherrefresh scroll-view程序scroll