Rumah hujung hadapan web tutorial js vue移动端实现下拉刷新步骤详解

vue移动端实现下拉刷新步骤详解

Apr 27, 2018 pm 12:02 PM
jatuh ke bawah segarkan semula langkah

这次给大家带来vue移动端实现下拉刷新步骤详解,vue移动端实现下拉刷新的注意事项有哪些,下面就是实战案例,一起来看一下。

看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件

说这个功能之前,大家要先了解一下,要怎么触发滚动条事件。

一定要注意,所有滚动事件都必须要满足这个条件,横向滚动条也一样,

只要满足子元素宽度大于父元素宽度就可以了。(下篇文章会讲怎么实现一个横向滚动条)

接入正题!!!

先来看看怎么剖析这个下拉刷新。

要用到的移动端的三个事件: touchstart(手指按下),touchmove(手指移动),touchend(手指离开)

下拉刷新也就是(touchstart => touchmove(下移动) =>touchend)的一个过程

大体思路:

下拉主要与手指触摸y轴点有关

1.记录下手指按下y轴的坐标点

2.记录手指移动时,移动的距离(注意:要判断手指是向上移还是向下移,向上移就是滚动)

3.启动下拉刷新事件

看代码:

vue中要在methods里面注册事件,在绑定到父元素上,这里大家应该都是用vue-cli搭建的项目了吧!

没有的话,我回头给个链接给大家,里面有已经搭建好的项目结构。包含这个插件的源码,demo都在里面1

<template>
  <p class="parent">
    <p class="child"></p>
  </p>
</template>
<script>
export default {
  data(){
    return {
      top: 0,
      startY: 0,     // 保存 y轴点的位置
      touching: false,  // 代表当前是否处于 下拉刷新行为的开关,也就是当属于滚动行为时,就要退出该事件机制
    }  
  },
  methods: {
    touchStart(e) {
      // e代表该事件对象,e.targetTouches[0].pageY可以拿到手指按下的 y轴点
      this.startY = e.targetTouches[0].pageY
      // 开启下拉刷新状态
      this.touching = true
    },
    touchMove(e) {
      //这个 touchMove,只要页面在动都会发生的,所以 touching就起作用了
      // 如果 touching为false,说明这个正在移动的页面不是我们想要的下拉刷新,有可能是用户随意拉了一下页面而已,或者其他
      if(!this.touching) return
      // 获取移动的距离
      let diff = e.targetToc=uches[0].pageY - this.startY 
      //判断是向上拉还是向下拉 
      if(diff >0) { 
        e.preventDefault()
      } else {
        return   
      }
      //这个this.top要对应绑定到该元素的transform: translateY(+top+ 'px')上,不然是无法拉动的
      // 因此这里还要对偏移高度做一下处理,直接设置diff +(this.state === 2 ? 40 : 0) 太快了,因为拉取幅度太大
      // 让diff*0.25这样子就差不多了
       this.top = Math.floor(diff*0.25) + (this.state === 2 ? 40 : 0)
      if(this.top >= 40){
        this.state = 1  //代表正在拉取
      } else {
        this.state = 0 // 代表初始转态
      }   
    },
    touchEnd(e) {
      this.touching = false
      if(this.state === 2) {
        this.top = 40
        return 
      }
      // 判断抬起时的高度,是大于40 就开启刷新
      if(this.top >= 40) {
        this.refresh()
      } else {
        this.state = 0
        this.top = 0
      }
    },
    refresh() {
      this.state = 2
      this.top = 40
      const self = this
      // 这里可以调用父组件的方法去请求刷新接口
      this.$emit('getRefresh', function(self){
        //传个回调过去,请求完数据就复原
        self.state = 0
        self.top = 0
      })
    }
  }
}
</script>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Node.js应用设置沙箱环境使用方法

vue2.0移动端做出下拉刷新与上拉加载功能

Atas ialah kandungan terperinci vue移动端实现下拉刷新步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menjadikan Peta Google sebagai peta lalai dalam iPhone Bagaimana untuk menjadikan Peta Google sebagai peta lalai dalam iPhone Apr 17, 2024 pm 07:34 PM

Peta lalai pada iPhone ialah Peta, pembekal geolokasi proprietari Apple. Walaupun peta semakin baik, ia tidak berfungsi dengan baik di luar Amerika Syarikat. Ia tiada apa-apa untuk ditawarkan berbanding Peta Google. Dalam artikel ini, kami membincangkan langkah yang boleh dilaksanakan untuk menggunakan Peta Google untuk menjadi peta lalai pada iPhone anda. Cara Menjadikan Peta Google Peta Lalai dalam iPhone Menetapkan Peta Google sebagai aplikasi peta lalai pada telefon anda adalah lebih mudah daripada yang anda fikirkan. Ikut langkah di bawah – Langkah prasyarat – Anda mesti memasang Gmail pada telefon anda. Langkah 1 – Buka AppStore. Langkah 2 – Cari “Gmail”. Langkah 3 – Klik di sebelah apl Gmail

6 Cara untuk Muat Semula Halaman Web pada iPhone 6 Cara untuk Muat Semula Halaman Web pada iPhone Feb 05, 2024 pm 02:00 PM

Apabila anda menyemak imbas web pada iPhone anda, kandungan yang dimuatkan disimpan buat sementara waktu selagi apl penyemak imbas kekal terbuka. Walau bagaimanapun, tapak web mengemas kini kandungan dengan kerap, jadi menyegarkan halaman adalah cara yang berkesan untuk mengosongkan data lama dan melihat kandungan yang diterbitkan terkini. Dengan cara ini, anda sentiasa mendapat maklumat dan pengalaman terkini. Jika anda ingin memuat semula halaman pada iPhone, siaran berikut akan menerangkan kepada anda semua kaedah. Cara Muat Semula Halaman Web pada Safari [4 Kaedah] Terdapat beberapa kaedah untuk memuat semula halaman yang anda lihat pada Apl Safari pada iPhone. Kaedah 1: Gunakan Butang Muat Semula Cara paling mudah untuk memuat semula halaman yang telah anda buka di Safari ialah menggunakan pilihan Muat Semula pada bar tab penyemak imbas anda. Jika Safa

ID Apple ini belum lagi digunakan dalam iTunes Store: Betulkan ID Apple ini belum lagi digunakan dalam iTunes Store: Betulkan Jun 10, 2024 pm 05:42 PM

Apabila log masuk ke iTunesStore menggunakan AppleID, ralat ini mengatakan "AppleID ini belum digunakan dalam iTunesStore" mungkin dilemparkan pada skrin. Tiada mesej ralat yang perlu dibimbangkan, anda boleh membetulkannya dengan mengikuti set penyelesaian ini. Betulkan 1 – Tukar Alamat Penghantaran Sebab utama gesaan ini muncul di iTunes Store ialah anda tidak mempunyai alamat yang betul dalam profil AppleID anda. Langkah 1 – Pertama, buka Tetapan iPhone pada iPhone anda. Langkah 2 – AppleID harus berada di atas semua tetapan lain. Jadi, bukalah. Langkah 3 – Setelah sampai, buka pilihan “Pembayaran & Penghantaran”. Langkah 4 – Sahkan akses anda menggunakan Face ID. langkah

Langkah-langkah untuk menaik taraf kepada versi terkini WeChat (Kuasai kaedah naik taraf kepada versi terkini WeChat dengan mudah) Langkah-langkah untuk menaik taraf kepada versi terkini WeChat (Kuasai kaedah naik taraf kepada versi terkini WeChat dengan mudah) Jun 01, 2024 pm 10:24 PM

WeChat ialah salah satu platform media sosial di China yang melancarkan versi baharu secara berterusan untuk memberikan pengalaman pengguna yang lebih baik. Menaik taraf WeChat kepada versi terkini adalah sangat penting untuk terus berhubung dengan keluarga dan rakan sekerja, untuk terus berhubung dengan rakan dan untuk mengikuti perkembangan terkini. 1. Fahami ciri dan penambahbaikan versi terkini adalah sangat penting untuk memahami ciri dan penambahbaikan versi terkini sebelum menaik taraf WeChat. Untuk peningkatan prestasi dan pembetulan pepijat, anda boleh mengetahui tentang pelbagai ciri baharu yang dibawa oleh versi baharu dengan menyemak nota kemas kini di tapak web atau gedung aplikasi rasmi WeChat. 2. Semak versi WeChat semasa Kami perlu menyemak versi WeChat yang sedang dipasang pada telefon bimbit sebelum menaik taraf WeChat. Klik untuk membuka aplikasi WeChat "Saya" dan kemudian pilih menu "Perihal" di mana anda boleh melihat nombor versi WeChat semasa. 3. Buka apl

Kunci muat semula F5 tidak berfungsi dalam Windows 11 Kunci muat semula F5 tidak berfungsi dalam Windows 11 Mar 14, 2024 pm 01:01 PM

Adakah kunci F5 tidak berfungsi dengan betul pada PC Windows 11/10 anda? Kekunci F5 biasanya digunakan untuk menyegarkan desktop atau penjelajah atau memuat semula halaman web. Walau bagaimanapun, sesetengah pembaca kami telah melaporkan bahawa kekunci F5 sedang menyegarkan komputer mereka dan tidak berfungsi dengan betul. Bagaimana untuk mendayakan penyegaran F5 dalam Windows 11? Untuk menyegarkan semula PC Windows anda, hanya tekan kekunci F5. Pada sesetengah komputer riba atau desktop, anda mungkin perlu menekan kombinasi kekunci Fn+F5 untuk menyelesaikan operasi muat semula. Mengapa penyegaran F5 tidak berfungsi? Jika menekan kekunci F5 gagal menyegarkan semula komputer anda atau anda mengalami masalah pada Windows 11/10, ia mungkin disebabkan oleh kekunci fungsi yang dikunci. Punca lain yang berpotensi termasuk papan kekunci atau kekunci F5

Bagaimana untuk menutup akaun video WeChat? Langkah terperinci untuk menutup akaun video WeChat Bagaimana untuk menutup akaun video WeChat? Langkah terperinci untuk menutup akaun video WeChat Jan 02, 2024 pm 11:57 PM

Untuk memahami cara menutup akaun video WeChat, anda perlu tahu terlebih dahulu bahawa WeChat, perisian sembang, sangat kaya dengan fungsi. Untuk orang yang berbeza, akaun video WeChat mempunyai fungsi yang berbeza. Bagi orang biasa, akaun video WeChat hanyalah saluran untuk berkongsi video pendek yang dirakam oleh individu, dan mereka boleh berkongsi beberapa video WeChat yang menarik. Bagi yang lain, mereka menggunakan akaun video WeChat untuk menarik trafik. Sememangnya, mereka mungkin tidak dapat menerima komen daripada troll dan troll, jadi mereka mungkin mahu menutup akaun video WeChat. Seterusnya, editor laman web ini akan memperkenalkan kepada anda bagaimana untuk menutup akaun video WeChat Rakan-rakan yang berminat, datang dan lihat langkah-langkah untuk menutup akaun video WeChat adalah seperti berikut: Kita buka WeChat dulu halaman, dan klik butang "Saya", yang akan membawa kita ke a

Apl Shazam tidak berfungsi dalam iPhone: Betulkan Apl Shazam tidak berfungsi dalam iPhone: Betulkan Jun 08, 2024 pm 12:36 PM

Menghadapi masalah dengan apl Shazam pada iPhone? Shazam membantu anda mencari lagu dengan mendengarnya. Walau bagaimanapun, jika Shazam tidak berfungsi dengan betul atau tidak mengenali lagu itu, anda perlu menyelesaikannya secara manual. Membaiki apl Shazam tidak akan mengambil masa yang lama. Jadi, tanpa membuang masa lagi, ikut langkah di bawah untuk menyelesaikan isu dengan aplikasi Shazam. Betulkan 1 – Lumpuhkan Ciri Teks Tebal Teks tebal pada iPhone mungkin menjadi sebab mengapa Shazam tidak berfungsi dengan betul. Langkah 1 – Anda hanya boleh melakukan ini daripada tetapan iPhone anda. Jadi, bukalah. Langkah 2 - Seterusnya, buka tetapan "Paparan & Kecerahan" di sana. Langkah 3 - Jika anda mendapati bahawa "Teks Tebal" didayakan

Tangkapan skrin iPhone tidak berfungsi: Cara membetulkannya Tangkapan skrin iPhone tidak berfungsi: Cara membetulkannya May 03, 2024 pm 09:16 PM

Ciri tangkapan skrin tidak berfungsi pada iPhone anda? Mengambil tangkapan skrin adalah sangat mudah kerana anda hanya perlu menahan butang Naik Kelantangan dan butang Kuasa pada masa yang sama untuk meraih skrin telefon anda. Walau bagaimanapun, terdapat cara lain untuk menangkap bingkai pada peranti. Betulkan 1 – Menggunakan Assistive Touch Ambil tangkapan skrin menggunakan ciri Assistive Touch. Langkah 1 – Pergi ke tetapan telefon anda. Langkah 2 – Seterusnya, ketik untuk membuka tetapan Kebolehcapaian. Langkah 3 – Buka tetapan Sentuh. Langkah 4 – Seterusnya, buka tetapan Assistive Touch. Langkah 5 – Hidupkan Sentuhan Bantu pada telefon anda. Langkah 6 – Buka “Sesuaikan Menu Teratas” untuk mengaksesnya. Langkah 7 – Sekarang anda hanya perlu memautkan mana-mana fungsi ini ke tangkapan skrin anda. Jadi klik pada yang pertama

See all articles