uniapp에서 풀다운 새로 고침을 구현하기 위해 scrpll-view 구성 요소를 사용하는 방법

scrpll-view 구성 요소를 사용하여 uniapp에서 풀다운 새로 고침을 구현하는 방법은 무엇입니까? 다음 글에서는 스크롤 뷰를 사용하여 uniapp에서 풀다운 새로 고침을 사용자 정의하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

uniapp 풀다운 새로 고침

uniapp 풀다운 새로 고침에는 두 가지 방법이 있습니다. 하나는 페이지 수명 주기 기능인 onPullDownRefresh를 사용하는 전체 풀다운 새로 고침입니다. 사용자 정의 풀다운이라고도 함 새로 고치려면 scrpll-view 구성 요소에서 사용자 정의 드롭다운 새로 고침 이벤트를 사용하세요.

1. 전체 페이지 새로 고침(onPullDownRefresh)

js에서 onPullDownRefresh 처리 기능을 정의하고(onLoad 및 기타 수명주기 기능과 동일한 수준), 사용자 풀다운 새로 고침 이벤트를 수신합니다. 페이지.【공식 문서】여기서는 더 이상 소개가 없습니다! 오늘의 초점은 다음과 같습니다

2. 사용자 정의 페이지 새로 고침(스크롤 보기)에서 발생한 문제

구성 요소

• 이 드롭다운을 트리거할 수 없음(문제 해결 원인)

  1. - 뷰 컴포넌트 외부는 뷰로 래핑되지 않습니다. 공식 홈페이지에서는 이 문제에 대해 언급하지 않지만, 컴포넌트만 감싸는 외부 뷰가 없으면 스크롤 뷰 컴포넌트에서 이벤트를 실행할 방법이 없습니다.

  2. 스크롤 뷰에는 높이가 고정되어 있지 않으며, 예를 들어 높이가 50vh(100vh는 전체 화면)로 설정되면 콘텐츠가 표시됩니다. 화면의 절반에만 표시됩니다. 화면을 위아래로 스크롤하면 페이지의 스크롤 막대가 발생하지 않지만 높이가 높을 경우scroll-view의 스크롤 막대가 발생합니다. 판별할 수 없는 경우scss(lang='scss')를 사용할 수 있습니다. calc 계산은 예제에 반영됩니다. (calc 계산을 사용할 경우 - 주위에 공백이 있어야 합니다.)scss(lang='scss')中的calc计算, 例子中有体现.(注意使用calc计算时, -左右一定要有空格)。

  3、设置高为百分比的话也不能触发下拉. 高可以使用max-hight, 不能使用min-hight。

  4、没有设置scroll-y

• 没有滚动到顶部触发下拉, 而是在可视页面中触发下拉

  官方默认无论page的滚动条在哪个位置, 只要在scroll-view页面上下拉都会触发下拉函数, 这样用户体验非常差. 可以使用@scroll滚动时触发的函数来获取scroll-view滚动条的位置, 进而来控制refresher-enabled开启和关闭自定义下拉刷新. 当scroll-view的滚动条滚动到顶部时, 使refresher-enabled
  3. 최고가 백분율로 설정된 경우에는

  max-hight
를 사용할 수 있지만

는 사용할 수 없습니다.

4. 스크롤 Y가 설정되지 않았습니다

드롭다운을 트리거하기 위해 맨 위로 스크롤하지 않지만, 보이는 페이지에서 드롭다운을 트리거합니다.

@refresherpulling="onPulling"这个方法，如下if (e.detail.deltaY // 防止上滑页面也触发下拉

演示：

出现，在页面上任意位置只要下滑动页面就会触发下拉，这类问题。可以使用@scrolltoupper="scrolltoupper"触顶函数，在这里面做一个准入可以解决！

也可以使用@scroll="onScroll"监听scroll-top的值，让其===0时触发，也就是到达顶部！再触发！但是遇到其必须滑动一下页面出现滚动条，他才会监听！我们可以init공식 기본값은 스크롤 막대의 위치와 상관없습니다. 페이지의 스크롤 보기 페이지가 아래로 당겨지는 동안 드롭다운 기능이 실행되므로 사용자 경험이 매우 저하됩니다.@scroll에 의해 실행되는 기능을 사용할 수 있습니다. 스크롤하여

scroll-view

export default { data() { return { triggered: false, dataList: [], arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], page: 0, isOpenRefresh: true // 是否开启下拉 }; }, onLoad() { this._freshing = false; this.getData() }, methods: { dealArray(array, groupNum) { let temp = []; for (let i = 0, len = array.length; i < len; i += groupNum) { temp.push(array.slice(i, i + groupNum)); } return temp; }, // 自定义下拉刷新控件被下拉 onPulling(e) { console.log("onpulling", e); if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉 this.triggered = true; }, // 自定义下拉刷新被触发 onRefresh() { if (this._freshing) return; this._freshing = true; this.page++; setTimeout(() => { this.triggered = false; this._freshing = false; this.getData(); }, 500); }, // 自定义下拉刷新被复位 onRestore() { this.triggered = 'restore'; // 需要重置 console.error("onRestore"); }, // 自定义下拉刷新被中止 onAbort() { console.error("onAbort"); }, getData() { // 前端模拟分页 let temp = this.dealArray(this.arr, 3) if (this.page > temp.length - 1) { this.isOpenRefresh = false return } this.dataList.push(...temp[this.page]) } }, };

// 触顶操作-准入 scrolltoupper() { this.isAllowRefresh = true } // 自定义下拉刷新控件被下拉 onPulling(e) { if (e.detail.deltaY < 0) return if (!this.isAllowRefresh) return; this.isRefresh = true; console.log("onpulling", e); }

export default class Index extends mixins(uiMixin) { scrollTop: number = 0 // 监听页面是否滚动 onScroll(e) { this.scrollTop = e.detail.scrollTop } // 自定义下拉刷新被触发 onRefresh() { if (this.scrollTop === 0) { if (this._freshing) return; this._freshing = true; this.page++; setTimeout(() => { this.triggered = false; this._freshing = false; this.getData(); }, 500); } } })

위 내용은 uniapp에서 풀다운 새로 고침을 구현하기 위해 scrpll-view 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!