Cara menggunakan komponen scrpll-view untuk melaksanakan muat semula tarik-turun dalam uniapp

Bagaimana untuk menggunakan komponen scrpll-view untuk melaksanakan muat semula tarik-turun dalam uniapp? Artikel berikut akan memperkenalkan kepada anda cara menggunakan paparan tatal untuk menyesuaikan muat semula tarik ke bawah dalam uniapp Saya harap ia akan membantu anda!

Uniapp pull-down refresh

Terdapat dua kaedah untuk uniapp pull-down refresh, satu ialah keseluruhan muat semula tarik-turun, Gunakan fungsi kitaran hayat halaman padaPullDownRefresh yang satu lagi ialah muat semula tarik-turun tempatan, juga dipanggil muat semula tarik-turun tersuai, menggunakan acara muat semula tarik-turun tersuai dalam komponen scrpll-view.

1 Muat semula seluruh halaman (onPullDownRefresh)

Tentukan fungsi pemprosesan onPullDownRefresh dalam js (dan onLoad, dsb. Tahap yang sama seperti fungsi kitaran hayat), dengar acara muat semula tarik turun pengguna halaman. [Dokumen Rasmi]Tiada pengenalan lagi di sini! Tumpuan hari ini adalah di bawah

2. Muat semula halaman tersuai (paparan tatal) yang ditemui dalam komponen

Masalahnya

• tidak boleh mencetuskan drop-down (menyebabkan penyelesaian masalah)

  1 Bahagian luar komponen paparan tatal tidak dibalut dengan paparan laman web rasmi tidak menyebut masalah ini, tetapi Jika tiada paparan luaran yang membungkus komponen ini sahaja, tiada cara untuk mencetuskan peristiwa dalam komponen paparan tatal.

  2. Paparan tatal tidak mempunyai ketinggian tetap dalam CSS. , kandungan di dalam komponen akan dipaparkan Ia hanya akan menatal ke atas dan ke bawah dalam separuh skrin Ia tidak akan mencetuskan bar skrol halaman . Jika sukar untuk menentukan ketinggian, anda boleh menggunakan pengiraan pengiraan dalam Ini ditunjukkan dalam contoh (Perhatikan bahawa apabila menggunakan kalk untuk mengira, mesti ada ruang di sekeliling -). scss(lang='scss')3. Jika tinggi ditetapkan sebagai peratusan, drop-down tidak boleh dicetuskan Anda boleh menggunakan

  max-hight

  untuk tinggi, tetapi anda tidak boleh menggunakan min-hight. . 4 Jika tatal-y tidak ditetapkan

tidak menatal ke atas untuk mencetuskan lungsur turun, tetapi mencetuskan lungsur turun dalam halaman yang kelihatan

• Lalai rasmi adalah tidak kira Di mana sahaja bar skrol halaman berada, selagi anda menatal ke atas atau ke bawah pada halaman paparan skrol, fungsi lungsur turun akan dicetuskan, yang menjadikan pengalaman pengguna sangat lemah . Anda boleh menggunakan fungsi

  yang dicetuskan semasa menatal untuk mendapatkan kedudukan bar tatal

  pandangan tatal, dan kemudian mengawal @scroll untuk menghidupkan dan mematikan penyegaran tarik ke bawah apabila tatal-. lihat skrol bar skrol ke atas, jadikan benar dan syarat lain adalah palsu. refresher-enabledrefresher-enabled
  

  Pergi terus ke kod untuk melihat: html:

Pada asasnya, ini adalah satu-satunya kaedah atribut yang digunakan untuk muat semula tarik-turun! js:

<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>

gaya:

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

[Nota] Muat semula tarik-turun paparan tatal akan menyebabkan halaman meluncur ke atas dan mencetuskan tarik-turun. Anda boleh menggunakan kaedah ini dalam

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

Seperti berikut

// Halang halaman daripada tergelincir ke atas dan mencetuskan drop-down

@refresherpulling="onPulling"if (e.detail.deltaY Demonstrasi:

muncul di mana-mana pada halaman Meluncur ke bawah halaman akan mencetuskan drop-down, masalah seperti ini. Anda boleh menggunakan fungsi

atas dan membuat pengakuan di dalamnya untuk menyelesaikan masalah!

@scrolltoupper="scrolltoupper"

Anda juga boleh menggunakan

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

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

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

untuk memantau nilai

dan biarkan ia tercetus apabila

, iaitu apabila ia mencapai puncak! Pencetus lagi! Tetapi apabila dia menemuinya, dia perlu meluncurkan halaman dan bar skrol muncul, dan kemudian dia akan mendengar! Kita boleh memulakannya apabila @scroll="onScroll" supaya pembolehubahnya pada mulanya 0! scroll-top===0init

Disyorkan: "

tutorial uniapp

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

"

Atas ialah kandungan terperinci Cara menggunakan komponen scrpll-view untuk melaksanakan muat semula tarik-turun dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!