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

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

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

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

min-hight

는 사용할 수 없습니다.

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

드롭다운을 트리거하기 위해 맨 위로 스크롤하지 않지만, 보이는 페이지에서 드롭다운을 트리거합니다.
@refresherpulling="onPulling"这个方法，如下 if (e.detail.deltaY // 防止上滑页面也触发下拉

演示：

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

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

<template>
<view>
  <scroll-view
    show-scrollbar="true"
    style="height: 300px"
    scroll-y="true"
    :refresher-enabled="isOpenRefresh"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    refresher-background="gray"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRestore"
    @refresherabort="onAbort"
    @scroll="onScroll"
  >
  <view v-if="!isOpenRefresh">别拉了，没有更多了~</view>
  <view class="item" v-for="(item, index) in dataList" :key="index">{{ item }}</view>
  </scroll-view>
</view>
</template>

로그인 후 복사

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

의 스크롤 막대 위치를 얻은 다음

새로 고침 활성화</code 코드>를 제어하고 스크롤 보기 스크롤 막대가 스크롤될 때 사용자 정의 풀다운 새로 고침을 켜거나 끕니다. 상단에서 <code>새로 고침 활성화

를 true로 설정하고 다른 조건은 false로 설정합니다.

🎜코드로 직접 이동하여 다음을 확인하세요. html:🎜

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 = &#39;restore&#39;; // 需要重置
      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])
    }
  },
};

로그인 후 복사

🎜기본적으로 이는 풀다운 새로 고침에 사용되는 유일한 속성 메서드입니다! js:🎜

<style>
view {
  text-align: center;
}
.item:nth-child(odd) {
  background-color: antiquewhite;
}
.item:nth-child(even) {
  background-color: aquamarine;
}
</style>

로그인 후 복사

🎜style:🎜

// 触顶操作-准入
scrolltoupper() {
    this.isAllowRefresh = true
}

// 自定义下拉刷新控件被下拉

onPulling(e) {
    if (e.detail.deltaY < 0) return
    if (!this.isAllowRefresh) return;
    this.isRefresh = true;
    console.log("onpulling", e);
}

로그인 후 복사

🎜🎜【참고】스크롤뷰 풀다운 새로고침을 하면 페이지가 위로 슬라이드되고 풀다운이 실행됩니다. @refresherpulling="onPulling"에서 이 방법을 사용할 수 있습니다. , 다음과 같이 if (e.detail.deltaY < 0) return // 페이지가 위로 미끄러져 내려오는 것을 방지하고 드롭다운을 트리거합니다 🎜🎜🎜Demo: 🎜🎜 uniapp에서 풀다운 새로 고침을 구현하기 위해 scrpll-view 구성 요소를 사용하는 방법

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

🎜🎜🎜 페이지를 슬라이드하면 나타납니다. 페이지의 아무 곳이나 아래로 내리면 이러한 유형의 문제가 발생합니다. @scrolltoupper="scrolltoupper" 상단 기능을 사용하고 그 기능을 인정하면 문제를 해결할 수 있습니다! 🎜🎜

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);
	}
  }
})

로그인 후 복사

🎜🎜 @scroll="onScroll"을 사용하여 scroll-top 값을 모니터링하고 ===일 때 트리거되도록 할 수도 있습니다. 0 즉, 정상에 도달하는 것입니다! 다시 트리거! 하지만 그 사람이 그것을 만나면 페이지를 밀어야 하고 스크롤 막대가 나타나야 합니다. 그러면 그는 듣게 될 것입니다! 변수가 초기에 0이 되도록 init 중에 초기화할 수 있습니다! 🎜🎜rrreee🎜추천: "🎜uniapp 튜토리얼🎜"🎜

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